Select

GuidelinesReact

When to use

  • To present many options where only one can be selected.
  • To keep long lists of options from being overwhelming.
  • To fit multiple options into a small space.

When not to use

  • When you have only a few options and enough space—use a radio.
  • When users can select more than one of a few options—use a checkbox.
  • When users can add and remove from many options—consider an input field with tags.
  • For structured options with enough space—use a list choice.

Component status

Released
Released
Released
Released

Content structure

Behavior

Use for many options

Content

Use labels

Use error and help messages

Error and Help messages

Include placeholder examples

Look & feel

Background color and borders