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

Select field

StorybookGithub
stable

SelectField allows users to make a single selection from an options menu. It contains label, can display help message and validation message if necessary.

Table of contents

How to use SelectField

  • Use labels. Labels are used to clearly communicate what the choices in the Select mean. They are also required from accessibility perspective.
  • Use help text. Include any necessary information as clear as possible to help users make a choice.
  • Use error messages. Guide users with the message and try to help your them solve the issue.

Code examples

SelectField with help message

SelectField with error message

Content recommendations

  • For the label, use short descriptive phrases
  • Options should be labeled in a clear way, so it's obvious what the option will do
  • If the selection needs more explanation, use help text below the field.
  • For validation provide solution focused error messages to guide users how to solve the issue

Accessibility

  • Select should always contain label, help or validation message.
  • Select should always have a name property.