BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

Forms

Displays a structured set of input fields that guides users through entering, validating, and submitting information.

Appearance

Standard form

Use reserveMessageSpace paired with a small Stack for spacing input fields, and a large Stack for spacing the actions from the input fields.

Heading

 
 
MonthPicker
 
 
 
Open in Playroom

Layout

Width

Place the form within a ContentBlock or PageBlock to constrain the width. Use size small so fields stay a manageable length. In special cases the width can be increased to medium to display larger blocks of content horizontally.

Multi-page forms

Break long forms into smaller steps using Stepper. Display validation on each page as the user attempts to progress. Give controls to move forwards and backwards, and when possible allow the user to save their place and return later.
Form contents
 
Open in Playroom

Interaction

Optional vs required fields

Form fields are considered required unless marked as optional. Indicate a field is optional by labelling it in the secondaryLabel property.

Validation

Field level validation

Display field-level validation when the submit button is clicked by highlighting invalid fields using message and tone critical.

Reserve message space

Use reserveMessageSpace by default. This prevents elements from shifting when validation messages appear.For simple forms where validation errors are unlikely or where layout shift is acceptable, you can choose to leave it off. In those cases, use a large Stack for spacing input fields, and an xlarge Stack for spacing the actions from the input fields.

Heading

MonthPicker (optional)
 
Open in Playroom

Submit button behaviour

Avoid disabling the submit button when required fields are missing. That is not an accessible solution and doesn’t tell the user how to fix the issue. Allow the user to attempt submit, then show field-level validation. When relevant, consider scrolling to the first error.

Best practices

When to use

Use a form when:
  • users need to enter, validate, and submit information
  • a task has multiple related fields.
Don’t use a form when:
  • users need to narrow a list rather than act on it (use Filters instead).

Related

  • ContentBlock — For controlling content width.
  • Stepper — For guiding users through a multi-step task.
  • TextField — For standard, short-form text input.
On this page