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 '@nature-ui/core';

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

Usage with Form Libraries#

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

Editable Example

Props#

NameTypeDefaultDescription
isInvalidbooleanfalseIf true, this prop is passed to its children.
isRequiredbooleanfalseIf true, this prop is passed to its children.
isDisabledbooleanfalseIf true, this prop is passed to its children.
isReadOnlybooleanfalseIf true, this prop is passed to its children.