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
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Label
Content 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: