Select

When to use

Use when users need to choose a single option from a list and space is limited. Dropdowns conserve screen space and prevent erroneous data entry by showing only valid options.

When not to use

  • For multiple selections, use MultiSelect
  • For 2 to 5 visible options, use RadioButton (lower cognitive load, all options visible)
  • For 2 to 3 inline options, use SelectButton for toggle-style selection
  • Familiar data like birthdays. users type faster than they select from long lists

Guidelines

  • Gray out, don't remove: Unavailable options should be grayed out, not removed. maintains spatial consistency.
  • Keep labels visible: The label should remain visible when the dropdown opens so users remember what they're selecting.
  • Avoid cascading: Don't make one dropdown's options depend on another. users get confused when options appear and disappear.

How it works