Also known as:
InputsLabelsPlaceholdersValidationForm layout

Forms

Forms let people enter data needed to use the platform.

AnchorNeed to know

  • Every form has a primary and secondary action.

To keep in mind

Layout

See individual component pages for label and input layout. We optimize for readability, scannability and time to form completion.

Our preferred layout is with individual form elements stacked vertically, grouped by context as necessary.

Actions

We require a single primary action to submit, with a secondary action to cancel and discard edits.

Accessibility

All form elements must have a label associated with the input. There are reasons you might make it visible to sighted users or not, see individual component pages for details.

Validation and feedback

Where possible use client side validation where the user is presented feedback before submitting the form.

When to use and when not to use

When to use
  • Only prompt for user input necessary to a specific task or action.
  • Prompt for input as close in time as possible to when it's needed.
When not to use
  • Don't prompt the user for input if the desired information can be determined via the browser (e.g. locale) or from data elsewhere in the system (e.g. asking a signed in user for their username).

See also

External links