FormField

FormField provides a cohesive way render form element's states such as isInvalid, isDisabled, and isRequired.

Imports#

• FormField - main wrapper context
• FormLabel - field's label
• FormLabelValue - renders form element's value
• FormHelperText - renders helper text
• FormErrorText - renders error text when FormField has isInvalid set to true
• FormRequiredText - renders when FormField has isRequired set to true
• useFormControl - context hook to glue external form elements with FormField's context.

Usage#

All the form elements of renderlesskit are compatible with FormField, thus you can directly use any of the elements inside of FormField and it will automatically handle all the accessibility & props.

Basic usage.

Required form fields#

By passing the isRequired prop, the Input field will have aria-required set to true, and the FormRequiredText will be shown.

Usage with Radios#

Usage with Switch#

Usage with slider#

Let's take a look at how we can use the Slider component with FormField:

First thing you might notice is that we can access the internal state of the FormField via render props.
And we are also utilizing the FormLabelValue to render the current value of the Slider.

Using custom inputs#

All the form elements of renderlesskit are compatible with FromField but you might want to use your own input element or any other external input elements.
For these situations we provide two ways to bind your custom input elements to FormField.

Method #1 (render props)#

Via the render props API, we expose the a variable called inputProps which holds all the aria related props which can be directly spread into the input.

Method #2 (useFormControl hook)#

useFormControl provides a much cleaner way to bind a custom input to FormField, all the renderlesskit form elements internally uses this hook too.

Integrations#

React Hook Form#

This example shows how to integrate renderlesskit Input with react-hook-form

Explore on CodeSandbox

Formik#

This example shows how to integrate renderlesskit Input with Formik

Explore on CodeSandbox

API Reference#

FormField#

FormField composes Box

useFormControl#