Form

Forms are used to gather information from the user.

View sourceView on npmReport an issue

Composed Components

A Form uses the following components.

Button

A button allows a user to initiate an action.

ButtonGroup

A button group handles the spacing and orientation for a grouping of buttons.

ErrorMessage

An error message displays validation errors for a form field.

HelperMessage

A helper message component displays auxiliary text to guide users in the interface.

NumberField

A number field is a specialized input that allows a user to enter a number.

PasswordField

A password field is a specialized text field that allows a user to enter a password.

TextField

A text field allows a user to enter a plain text value.

Usage

Disabled

A disabled form will not allow the user to interact with the form.

Validation

To provide validation errors, the validationErrors prop should be set to an object that maps each field's name prop to a string or array of strings representing one or more errors. These are displayed to the user as soon as the validationErrors prop is set and cleared after the user modifies each field's value.

Native Behavior

Native HTML form validation is used to display errors and block form submission.

Aria Behavior

To use form validation via ARIA, set the validationBehavior property to "aria". This will not block form submission and will display validation errors to the user in real time as the value is modified.

Sizes

A form has multiple sizes to choose from.

Fluid

Form fields can take the width of their container.

Props

isDisabled?

Whether the form elements are disabled.

isFluid?

If true, the Form will take all available width.

necessityIndicator?

Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.

size?

The size of the fields and buttons within the form.

Defaults to md.
style?

The inline style for the element.

validationBehavior?

Whether to use native HTML form validation to prevent form submission when a field value is missing or invalid, or mark fields as required or invalid via ARIA.

Defaults to 'native'.
validationErrors?

Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors.

action?

Where to send the form-data when the form is submitted. See MDN.

encType?

The enctype attribute specifies how the form-data should be encoded when submitting it to the server. See MDN.

method?

The HTTP method to submit the form with. See MDN.

target?

The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. See MDN.

onSubmit?

Triggered when a user submits the form.

onReset?

Triggered when a user resets the form.

onInvalid?

Triggered for each invalid field when a user submits the form.

autoComplete?

Indicates whether input elements can by default have their values automatically completed by the browser. See MDN.

autoCapitalize?

Controls whether inputted text is automatically capitalized and, if so, in what manner. See MDN.

role?

An ARIA role override to apply to the form element.

children?

The children of the component.

className?

The CSS className for the element.

id?

The element's unique identifier. See MDN.