Version 4 beta
Forma 36 v4 beta is availableClick here to go to the new version
Forma 36

Select

StorybookGithub
stable

Select allows users to make a single selection from an options menu. Keep in mind that Select should not be used without the label. We provide SelectField component, which contains label, help or error message if needed.

Table of contents

How to use Select

  • Use Select to present many different options in one component
  • When you have only a few options try to show them all at once, using Radio buttons.
  • Use Select in Forms
  • Order the list of options in a logical way, so it make sense for the user
  • Don't use Select for a very long list of options, instead for those cases use Autocomplete
  • if you use Select component add your custom label to it or use our SelectField instead

Select vs dropdown

  1. Dropdown menus are typically used for navigation or command menus, where an action is initiated based on the selection.
  2. Select is a type of input, where the user is choosing one option from the list, typically used in Forms.

Code examples

Select state (disabled)

Select with placeholder

Select with error

Content recommendations

  • Options should be written in sentence case (the first word capitalized, the rest lowercase).
  • Options should be labeled in a clear way, so it's obvious what the option will do

Accessibility

  • Select should contain a label, if needed help message and validation message if needed. We provide SelectField component, that contains all of those elements.
  • Select should always a name property.