Form Control
Form control is a utility to easily re-use form field styles and accessibility features.


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

Melons are berries

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

Favorite animals:


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 helper message when status changes you can use conditional rendering based on the status.

Melons are berriesThis field is required

Using with custom inputs

When using FormControl for rendering custom-built input fields, you can get all the context data with useFormControl hook. All the props provided by useFormControl can be found in the properties section.



By wrapping all of its elements, FormControl provides all the attributes required by accessibility standards. They are passed to the Arcade input components by default but make sure all of them are used when building custom input components.


FormControl properties:

groupboolean-falseIs it used for multiple inputs?
idstring-falseId override

FormControl.Label, FormControl.Helper, FormControl.Error, FormControl.Success properties:


Properties returned by useFormControl

attributesReactNode-falseAttributes to pass to the input, including its generated id