Form Control

FormControl provides context such as isInvalid, isDisabled, and isRequired to form elements. This context is used by the following components:

It follows the WAI specifications for forms.

Import#

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 asterisks.

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
isInvalidbooleanIf true, this prop is passed to its children.
isRequiredbooleanIf true, this prop is passed to its children.
isDisabledbooleanIf true, this prop is passed to its children.
isReadOnlybooleanIf true, this prop is passed to its children.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo