Form Control

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

It follows the WAI specifications for forms.

Import#

import {
FormControl,
FormLabel,
FormErrorMessage,
FormHelperText,
} from "@chakra-ui/react"

Usage#

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

Number Input 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.

Props#

NameTypeDescriptionDefault
colorSchemestring-
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`-
isReadOnlybooleanIf `true`, the form control will be readonly-
isRequiredbooleanIf `true`, the form control will be required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-required` set to `true`-
labelstringThe label text used to inform users as to what information is requested for a text field.-
sizestring-
variantstring-
Edit this page