Coming from Orbiter, you should be aware of the following changes:
disabledhas been renamedisDisabled.fluidhas been renamedisFluid.
Composed Components
A Form uses the following components:
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.
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.
children?
The children of the component.
className?
The CSS className for the element.