Forms

Forms are used to enter information.

General guidelines

• Label fields as ‘optional’ rather than ‘required’. Users tend to assume everything is required, and usually most things are, so mark the exceptions. Add ‘(optional)’ to the field label to do this.
• Labels should be over fields, not to the left, unless there is a vertical space constraint like in modals.
• Keep text inputs to a sensible width. max-w-prose is a good default.
• When possible, validate input and show success as well as error. Do this when the user is using the fields to give immediate feedback.

Form components

• Text input
• Checkbox
• Toggle
• Radio button

Example