Overview
The form component is configurable to fit various use cases and layouts. It is purposely simple out of the box.
Forms are incredibly common in user interfaces. Their design and usage continues to evolve. You might design a form for a user to:
- Sign up for or log into an account
- Register for a service
- Reconfigure settings, e.g. enabling notifications
- Take a survey
- Purchase a product
- Provide feedback
Formatting
Forms are comprised of some or all of the following elements.
Anatomy
- Header (optional): Including a title and description as a header that can provide the user with additional context or instructions.
- Form body: Area where users provide information. Information can be entered through various input fields, including text fields, checkboxes, and other types. Input components contain labels and helper text.
- Footer: Provides actions that allow users to submit or cancel the data entered in the form.
Behavior
States
The following are common states that can be applied to components when used in a form.
State | When to use |
|---|---|
Enabled | When a text input is live but a user is not directly interacting with it. This is often called the default or normal state. An enabled text input field can contain no content, placeholder text, or user-generated content. |
Active | When a user is actively entering content into the field. |
Focus | When a user tabs to or clicks on the text input. This indicates that the user has successfully navigated to the component. |
Error | When the user input is invalid or a required text input has not been filled in. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved. |
Warning | When you need to call the user’s attention to an exception condition. The condition might not be an error, but can cause problems if not resolved. |
Disabled | When the user is not allowed to interact with the text input due to permissions, dependencies, or prerequisites. The disabled state removes the interactive function from a component. The styling is not subject to WCAG contrast rules. |
Error handling
The error box provides a summary of validation errors. After a user has submitted a form, this box will show applicable errors. The error box appears at the top of the form. The list items in the error box link to their respective input fields.
Required fields
Use a legend at the start of a form to identify the symbol that indicates required fields. This symbol is often an asterisk. Include the symbol as part of the label for each appropriate field.
Best practices
Do:
- Align components within the form.
- When using two columns, each row should respond as a group. For example, if the left column form item becomes invalid and pushes form content down to accommodate space for an error message, then the accompanying right form item will also grow to account for the needed space.
- Label all text input fields.
Don't:
- Use colons after label names.