Skip to main content
  • Guidelines
  • React API Reference
  • Blazor API Reference
Select components allow users to choose a single option from a dropdown list, providing a space-efficient way to present multiple options without cluttering the interface.

​
Guidance

AspectBest Practice
UsageUse select components for single-choice selections from lists with more than 5-7 options. For fewer options, consider radio buttons for better visibility.
ContentProvide clear option labels. Group related options when the list is long. Include a meaningful default selection or placeholder.
BehaviorDisplay selected option when collapsed. Support keyboard navigation. Close on selection, escape key, or outside click.
StatesClearly indicate focus, hover, selected, disabled, and error states. Show loading state when options are fetched asynchronously.
FeedbackProvide immediate visual feedback when an option is selected. Clearly indicate when the dropdown is open or closed.
ExamplesCountry selection, category filters, preference settings, or any single-selection from a predefined list.

​
Best Practices

  • Clear Default State: Provide a meaningful default selection or descriptive placeholder text.
  • Logical Organization: Group related options and consider alphabetical ordering for long lists.
  • Keyboard Accessibility: Ensure users can navigate and select options using arrow keys, Enter, and Escape.
  • Visual Distinction: Make the currently selected option clearly visible in both open and closed states.
  • Error Handling: Provide clear validation messages when an invalid or required selection is not made.

​
Do’s and Don’ts

Do

  • Provide clear, descriptive option labels.
  • Group related options in long lists.
  • Ensure keyboard accessibility.
  • Show a meaningful default or placeholder.

Don't

  • Use for fewer than 5 options (consider radio buttons).
  • Create overly long lists without grouping or search.
  • Hide or disable options without explanation.
  • Rely solely on color to indicate selection.

​
Additional Guidance

  • Psychological Impact:
    • Choice Architecture: Select dropdowns help manage complexity by hiding options until needed.
    • Decision Fatigue: Well-organized options reduce the cognitive load of making selections.
    • Familiarity: Select components leverage a widely understood interaction pattern that feels familiar to users.
⌘I