Select lets users choose one option from a list.

How to use select

Use select when a user is submitting data in forms and needs to choose one option from a list.

When using select:

  • Use the autocomplete component as well as select if your list has more than 10 options
  • Make sure the placeholder label uses instructive language to assist users
  • List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order
  • Programmatically connect each label to its corresponding option
  • If your list has fewer than 4 options, use radio buttons instead

Types of select

Single select

  • Interactive demo - Sainsbury's

Single select with an error message

  • Interactive demo - Sainsbury's

Copy guidelines

When using select:

  • Be clear about what will happen if the option is selected
  • Start with ‘Please select’ as a placeholder if there isn’t a default option
  • Start your select labels with a capital letter
  • Don’t use commas or any punctuation at the end of each label
  • Don’t use more than three words per label

Was this page helpful?

Get in touch

Our team can answer any questions about using select or give you a helping hand with your next project.
Select a theme to demo: