Select lets people choose one option from a menu. Consider a select when you have four or more options, to avoid cluttering the interface.
Figma
The Figma reference for Select will appear here once the design link is added.
Storybook
Interactive examples for Select will render here once the Storybook link is wired in.
Best practices
- Use it for choosing between four or more predefined options.
- Have a default option selected whenever possible.
- Use “Select” as a placeholder only if there’s no logical default option.
- List options alphabetically or in another logical order so people can find what they need.
Do’s and don’ts
Do
Write a short, descriptive label in sentence case: “Email address”.
Don’t
Turn the label into a question or a sentence fragment: “What is your email address?”, “My phone number is:”.