Props
- isDisabled?
- isFluid?
- necessityIndicator?
- size?
- style?
- validationBehavior?
- validationErrors?
- action?
- encType?
- method?
- target?
- onSubmit?
- onReset?
- onInvalid?
- autoComplete?
- autoCapitalize?
- role?
- children?
- className?
- id?
Whether the form elements are disabled.
If true
, the Form will take all available width.
Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.
The size of the fields and buttons within the form.
The inline style for the element.
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.
Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors.
Where to send the form-data when the form is submitted. See MDN.
The enctype attribute specifies how the form-data should be encoded when submitting it to the server. See MDN.
The HTTP method to submit the form with. See MDN.
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.
Triggered when a user submits the form.
Triggered when a user resets the form.
Triggered for each invalid field when a user submits the form.
Indicates whether input elements can by default have their values automatically completed by the browser. See MDN.
Controls whether inputted text is automatically capitalized and, if so, in what manner. See MDN.
An ARIA role override to apply to the form element.
The children of the component.
The CSS className for the element.
The element's unique identifier. See MDN.
- aria-label?
- aria-labelledby?
- aria-describedby?
- aria-details?
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
Composed Components
A Form
uses the following components.
Examples
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.