skip to main content

skip to navigation sidebar

skip to context sidebar

created:7/7/2021

updated:7/7/2021

loc

229

comments

4%

passed

4

failed

6

coverage

10%

Form

grommet-controls

3.0.2

A Form with built-in validation.

Component

import { Form } from 'grommet-controls';

Main

() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{
      horizontal: 'small',
    }}
  >
    <PasswordInputField
      label="Password"
      name="password"
      validation={[
        validators.required(),
        validators.minLength(8),
        validators.alphaNumeric(),
      ]}
    />
    <PasswordInputField
      label="Confirm Password"
      name="password1"
      validation={[validators.equalsField('password', 'the above password')]}
    />
    <TextInputField
      label="URL"
      name="url"
      validation={[validators.required(), validators.url()]}
    />
    <SelectField
      name="gender"
      options={['male', 'female']}
      validation={[validators.required()]}
    />
    <CheckBoxField
      name="tos"
      label="Terms of service"
      validation={[
        validators.required(),
        validators.True('Please accept the TOS'),
      ]}
    />
    <NumberInputField
      min={6}
      max={22}
      name="age"
      label="Age"
      validation={[
        validators.required(),
        validators.numeric(),
        validators.bigger(10),
        validators.smallerOrEqual(18),
      ]}
    />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

Properties

	Name	Description	Default
IFormProps(10 properties)
	a11yTitle	Custom title to be used by screen readers string	-
	focusFirstChild	Whether to focus the first form control on mounting boolean	true
	object	Initial values of the form data object object	{}
	onSubmit	A function called when the user successfully submits the form (data: object) => void	undefined
	onChange	A function invoked when any of the values in the form are changing (name: string, value: any, event: MouseEvent<HTMLElement, MouseEvent> & { value: any; }) => void	undefined
	onSubmitError	A function invoked when an error occured during submitting (errors: IFormErrors) => void	undefined
	onValidForm	A function invoked on every change when the form is valid (data: object) => void	undefined
	onInvalidForm	A function invoked on every change when the form is invalid (data: object) => void	undefined
	tag	The DOM tag to use for the form string & PolymorphicType	form
	className	css class name, assigned by styled-components string	-
BoxProps(26 properties)

Commits

Date	Author	Commit Message
8/31/2020	atanasster	update stories titles and navigation
8/30/2020	atanasster	update versions for publish
8/30/2020	atanasster	update eslint and add component-controls
8/30/2020	Atanas Stoyanov	Merge pull request #33 from bartv2/form-initial-values
8/30/2020	Bart Visscher	Adding initialValues prop because the object prop makes this a controlled component
8/30/2020	Bart Visscher	Fix missing filterByFocusable in grommet
8/27/2019	atanasster	initial commit 2.x alpha

7 commits

External dependencies

package	imports	peer
grommet ^2.15.0	BoxPropsBox	*
grommet/utils/object ^2.15.0	deepMerge	*
react ^17.0.1	ReactComponent	*

Internal dependencies

file	imports
"./StyledForm"	StyledForm
"../../utils/dom"	filterByFocusable
"./FormProps"	IFormPropsIFormContextIFormErrorsIFormFieldProps

Component JSX

<StyledComponent

classNameonSubmitaria-label

>

StyledComponent

<Box

direction

>

^2.15.0

<Box

/>

^2.15.0

Stories

On Submit

() => (
  <Form
    focusFirstChild={false}
    onSubmit={() => console.log('onSubmit')}
    basis="small"
  >
    <TextInputField label="Text" name="fieldname" />
  </Form>
)

On Change

() => {
  const [changedValue, setChangedValue] = React.useState('');
  return (
    <Box pad="small">
      <Form
        focusFirstChild={false}
        onChange={(name, value) => {
          console.log(name, value);
          setChangedValue(value);
        }}
        basis="small"
      >
        <TextInputField label="Text" name="mytextinput" />
      </Form>
      <Text size="small">{changedValue}</Text>
    </Box>
  );
}

On Submit Error

() => (
  <Box pad="small">
    <Form
      focusFirstChild={false}
      onSubmit={() => console.log('onSubmit')}
      onSubmitError={() => console.log('onSubmitError')}
      basis="small"
    >
      <TextInputField
        label="Text"
        name="errofield"
        validation={[validators.required(), validators.minLength(8)]}
      />
    </Form>
  </Box>
)

On Invalid Form

valid

() => {
  const [invalid, setInvalid] = React.useState(undefined);
  return (
    <Box pad="small">
      <Form
        focusFirstChild={false}
        onSubmit={() => console.log('onSubmit')}
        onInvalidForm={error => setInvalid(error)}
        onValidForm={() => setInvalid(undefined)}
        basis="small"
      >
        <TextInputField
          label="Text"
          name="invalidfield"
          validation={[validators.required(), validators.minLength(8)]}
        />
      </Form>
      <Text size="small">{invalid ? 'invalid' : 'valid'}</Text>
    </Box>
  );
}

validation/EmailInputField

validation/MaskedInputField