Forms are a collection of inputs that allow users to submit data. Forms control layout and spacing between form elements and sections.
<Form>
<Input id="project" labelText="Project code" />
<Input id="customer" labelText="Customer's name" />
<Select placeholder="Please select project status" options={options} labelText="Project status" />
<Textarea rows={4} mb="x6" labelText="Project description" />
<Box mb="x6">
<PrimaryButton mr="x1">Create project</PrimaryButton>
<QuietButton>Cancel</QuietButton>
</Box>
</Form>
<Form title="New Project">
<Input id="project" labelText="Project code" />
<Input id="customer" labelText="Customer's name" />
<Select mb="x6" placeholder="Please select project status" options={options} labelText="Project status" />
<Box mb="x6">
<PrimaryButton mr="x1">Create project</PrimaryButton>
<QuietButton>Cancel</QuietButton>
</Box>
</Form>
Inline validation can be added to individual form inputs to show a red border and icon.
When a form has returned with errors, add a Danger Alert to the top of the form with a summary so that users don't need to scroll around the form to see what needs to be fixed.
Examples of errors can be found in the storybook Demo Page.
Name | Type | Default | Description |
---|---|---|---|
title | string | null | Form title |
className | String | undefined | className passed to the form component. |
The Form component has access to space style props. See the style prop documentation for a full list of available props.