Skip to Content

Form Control

FormControl provides context such as isInvalid, isDisabled, and isRequired to form elements.

It follows the WAI specifications for forms.



We'll never share your email.
Editable Example

Sample usage for a radio or checkbox group#

Favorite Naruto Character
Select only if you're a fan.
Editable Example

Making a field required#

By passing the isRequired props, the Input field has aria-required set to true, and the FormLabel will show a red asterisk.

Editable Example

Select Example#

Editable Example

Usage with Form Libraries#

Form Libraries like Formik make it soooo easy to manage form state and validation. I 💖 Formik

Editable Example

Improvements from v1#

  • We've improved the accessibility of the FormControl component. Here are the changes:

    • id passed to the form control will be passed to the form input directly.
    • FormLabel will have htmlFor that points to the id of the form input.
    • FormErrorMessage adds aria-describedby and aria-invalid pointing to the form input.
    • FormHelperText adds/extends aria-describedby pointing to the form input.
    • isDisabled, isRequired, isReadOnly props passed to FormControl will cascade across all related components.
  • FormLabel is now aware of the disabled, focused and error state of the form input. This helps you style the label accordingly using the _disabled, _focus, and _invalid style props.

  • If you render FormErrorMessage and isInvalid is false or undefined, FormErrorMessage won't be visible. The only way to make it visible is by passing isInvalid and setting it to true.


cssInterpolation<{}>The emotion's css style object-
errorTextstringThe error message to be displayed when `isInvalid` is set to `true`-
helperTextstringThe assistive text to be displayed that provides additional guidance to users-
isDisabledbooleanIf `true`, the form control will be disabled. This has 2 side effects: - The `FormLabel` will have `data-disabled` attribute - The form element (e.g, Input) will be disabled-
isInvalidbooleanIf `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`-
isLoadingbooleanIf `true`, the form control will be in its `loading` state-
isReadOnlybooleanIf `true`, the form control will be readonly-
isRequiredbooleanIf `true`, the form control will required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-requred` set to `true`-
labelstringThe label text used to inform users as to what information is requested for a text field.-
orientation"horizontal" | "vertical"-
styleConfigRecord<string, any>-
Edit this page