Forms elements

A form allows visitors to submit information to a server.

Common form elements include:

• Label
• Text field
• Text area
• Checkbox
• Radio button
• Dropdown menu
• File input
• Buttons

Label

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".

Full name


   

Text field or text area

A text field allows visitors to write or edit one line of text.

Full name



    

  *
  Required field:
  Full name


This field is required

   

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.

Your message

Use this space for error messages or instructions text

    

  *
  Required field:
  Your message


This field is required

   

Checkbox

A checkbox allows visitors to select one or more options from a number of choices.

Pick one or more of these items:

  
  Option 1


  
  Option 2


  
  Option 3


   

Radio button

A radio button allows visitors to select only one option from a number of choices.

Pick only one of these items:

  
  Option 1


  
  Option 2


  
  Option 3


   

Dropdown menu

Other names: select

A dropdown menu hides options by default. When interacted with, the dropdown menu displays a list of options visitors may select.

Custom select

  Select an option
  Option 1
  Option 2
  Option 3


   

File input

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.

Upload your file

  

Feedback text.

   

Usage

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.

Accessibility

Standard accessibility review

Each time a new component version is published:

• Test with the axe accessibility tool
• Review with the VoiceOver or NVDA screen reader
• Ensure all actionable elements are accessible by keyboard command and tab in a logical order
• Check the component layout on a variety of screen sizes