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

Usage

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.

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.

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

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.

Accessibility

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.

Properties

FormControl properties:

NameTypeDefaultRequiredComment
childrenReactNode-false
hasErrorboolean-false
hasSuccessboolean-false
requiredboolean-false
groupboolean-falseIs it used for multiple inputs?
idstring-falseId override

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

NameTypeDefaultRequiredComment
childrenReactNode-false

Properties returned by useFormControl

NameTypeDefaultRequiredComment
attributesReactNode-falseAttributes to pass to the input, including its generated id
requiredReactNode-false
statusReactNode-false