Form control

Import
import { FormControl, useFormControl } from "reshaped";
import type { FormControlProps } from "reshaped";

Works with all Reshaped form fields with no additional setup

Provides a hook to use with custom form field components


Usage

FormControl provides a wrapper and separate components for the form field label, helper text, and status captions. When used together with input components provided by the Reshaped, those components will use the context data from the FormControl automatically.

By default, FormControl works with single fields, but it can be used for input groups with the group property. This will convert FormControl to a fieldset, providing better accessibility for your grouped form elements. It's handy when you need a label for a group of Radio or Checkbox fields.

Statuses

FormControl provides success and error statuses which control the rendering of error/success messages and let you use them to change the input styles based on the current status. Error and success messages render only when their status is on, but helper is rendered all the time by default. If you want to hide the helper message when input status changes, you can use conditional rendering based on the status.

Using with custom inputs

When using FormControl to render custom-built input fields, you can get all the context data with the useFormControl hook. All propertiess provided by useFormControl can be found in its documentation.

Accessibility

FormControl provides all attributes required by accessibility standards to the wrapped elements. They are passed to the Reshaped input components by default but make sure all of them are used when building custom input components.

Previous
Next