Select field

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
• Code examples
• Content recommendations
• Accessibility

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

// import { SelectField } from '@contentful/forma-36-react-components';

<SelectField
  name="optionSelect"
  id="optionSelect"
  labelText="Label"
  selectProps="large"
>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</SelectField>
// import { SelectField } from '@contentful/forma-36-react-components';

<SelectField
  name="optionSelect"
  id="optionSelect"
  labelText="Label"
  selectProps="large"
>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</SelectField>
Hide source

SelectField with help message

// import { SelectField } from '@contentful/forma-36-react-components';

<SelectField
  name="optionSelect"
  id="optionSelect"
  labelText="Label"
  selectProps="large"
  helpText="Here you can add an additional information about the select"
>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</SelectField>
// import { SelectField } from '@contentful/forma-36-react-components';

<SelectField
  name="optionSelect"
  id="optionSelect"
  labelText="Label"
  selectProps="large"
  helpText="Here you can add an additional information about the select"
>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</SelectField>
Hide source

SelectField with error message

// import { SelectField } from '@contentful/forma-36-react-components';

<SelectField
  name="optionSelect"
  id="optionSelect"
  labelText="Label"
  selectProps="large"
  validationMessage="In case of error you can add your validation message over here"
>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</SelectField>
// import { SelectField } from '@contentful/forma-36-react-components';

<SelectField
  name="optionSelect"
  id="optionSelect"
  labelText="Label"
  selectProps="large"
  validationMessage="In case of error you can add your validation message over here"
>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</SelectField>
Hide source

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.