Resources
Intro & Anatomy
Select components enable users to choose one option from a predefined list of at least four options through a dropdown interface.
Use selects when users need to make a single selection from multiple options where space efficiency is important, e.g. choosing countries, categories, or time periods.
Selects conserve interface space by displaying only the selected option whilst providing access to all available choices through an expandable list. They work best when users need to select from a substantial number of mutually exclusive options.
Options & Styles
Labels & Helpers
Label is always required to provide clear context for expected input.
Hint is optional and provides additional guidance or examples.
Counter is optional and shows character limits or current count.
Icon is optional and should only be used when it provides additional benefit.
Input Values
Selected value displays the user's entered text or data.
Placeholder / Prompt is optional and provides example formatting or expected content.
States
Selects have multiple interactive states:
Default for standard input appearance
Selected for when the user has selected an option from the dropdown
Error for validation failures requiring user attention
Disabled
Disabled selects show that a field exists but isn't currently available for input, e.g. when certain conditions haven't been met or the field is temporarily unavailable.
Best Practice & Usage
Selects should be used for single-choice scenarios with multiple options where space conservation is beneficial.
Use clear, concise option labels and provide appropriate default states for optimal user experience.
Use a select menu to display multiple options, allowing users to choose only one. If users can select multiple options, employ checkboxes instead.
If you have limited options and sufficient space, avoid using a select and opt for radio buttons instead. Too many interactions can lead to user frustration.
Use select when there are five options or more, and users can choose only one.
Don't display an empty state for selects on page load. If there's no default option, use a placeholder instead.
Use 1-3 words for options and keep to a single line of text.
Keep options as short as possible and don't use long, multi-line texts.
Set select to full view-width (100vw or 100%) on mobile for better usability.
Avoid displaying selects smaller than full width on mobile devices.
Theming
You can customise colours, border width and radius, font styles and weights, spacings and sizes to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons for star representations.