Dropdown

When to use this component

Use dropdowns when:

• You have a specific set of options (ideally 5-15 items)
• Screen space is limited and hiding options until needed helps
• Users need to make a single selection from a list
• Options are simple and don’t need complex formatting

Avoid dropdowns for multi-select scenarios; use checkboxes instead.

How to use this component

• Provide a clear label describing what the dropdown selects
• Use concise, scannable text for options
• Show the selected option as the dropdown label when closed
• Arrange options in a logical order (alphabetical, numerical, or contextual)
• Ensure enough space between options to prevent mis-clicks
• Support keyboard navigation for accessibility
• Consider alternative components for fewer than 5 options
• Make the dropdown wide enough to fit the longest option text
• Replace the dropdown title with the selected option