A form allows visitors to submit information to a server.
Common form elements include:
- Text field
- Text area
- Radio button
- Dropdown menu
- File input
The label should:
- Describe the purpose of the text field or other item.
- Use sentence-style capitalization — only capitalize the first word.
- Be short and concise.
- Use nouns or short noun phrases.
- Inform visitors whether or not the form input is required or optional.
- Avoid instructional text like "Click to get started".
Text field or text area
A text field allows visitors to write or edit one line of text.
A text area allows visitors to write or edit multiple lines of text. Same as the text field, the text area should always have a label that is associated with it.
You can include instructional or error messages beneath the field.
You can also include placeholder text in the field. Placeholder text disappears when the visitor interacts with the text field, so make sure they don't need it to fill in the text field.
Instructional, error messages, and placeholder text should not provide the same message as the label.
A checkbox allows visitors to select one or more options from a number of choices.
A radio button allows visitors to select only one option from a number of choices.
Other names: select
A dropdown menu hides options by default. When interacted with, the dropdown menu displays a list of options visitors may select.
A file input lets the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission.
When and how to use it
Use a form when visitor input is required to complete an action.
Forms direct visitors to provide and submit relevant information. Use them to let visitors change their personal settings or submit an application.
Forms work well when you:
- Use clear feedback alerts to inform visitors of their progress.
- Auto-save form progress so data is not lost.
- Group related sections into logical sets (like name, address, phone number).
- State the action the buttons perform when selected.
Start mobile first, single column when designing a form. Where practical, combine related fields using two columns. Form elements should stack one on top of the other.
Keep in mind the mobile and screen magnification experience.
How not to use it
Do not use a form if it is not needed.
Do not use confusing error messages or place them away from the problem. As close to the field in error as possible, explain why the visitor cannot progress in the form with a clear, concise error message.
Standard accessibility review
Each time a new component version is published: