Form

<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>

Variations

With title

<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>

Guidelines

• Always order items in a logical order that doesn’t require scrolling around
• Whenever possible group items together into form sections
• Lay out the form in a single column
• Place actions on the bottom of the form
• Use a label with every input
• Placeholders are not replacements for labels, as they are not treated as labels by assistive technology and they disappear when a user tries interacting with a field.
• Use only one of (Optional) or (Required) label in a single form. Decide which is more common and apply the label to the smaller of the two groups.

Handling Errors

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.

Error message content guidelines

• The best error is one that doesn’t exist so try to prevent errors when possible by grouping related fields, writing effective help text and clearly communicating input expectations.
• There are three important messages that a good form error message should convey to the user:
  • An error has occurred
  • Where the error occurred
  • How to recover from an error
• When writing error text, do not blame the user. e.g “That number is incorrect” vs “You’ve entered an incorrect number”.
• Avoid vague, generalized or cryptic error messages.

Props

The Form component has access to space style props. See the style prop documentation for a full list of available props.

Related components

• Form Section
• Input
• Checkbox
• Checkbox Group
• Radio
• Radio Group
• Select
• Textarea
• Toggle