Forms let people enter data needed to use the platform.
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.
We require a single primary action to submit, with a secondary action to cancel and discard edits.
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.
Where possible use client side validation where the user is presented feedback before submitting the form.
- 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.
- 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).
- Checkbox Field
- Checkbox Group
- Date Picker
- Icon Button
- Link vs button
- Radio Group
- Text Field