Select

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

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

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

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

<Select id="optionSelect" name="optionSelect" width="large">
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</Select>
Hide source

Select state (disabled)

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

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

<Select id="optionSelect" name="optionSelect" isDisabled>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</Select>
Hide source

Select with placeholder

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

<Select name="optionSelect" id="optionSelect">
  <Option value="" disabled selected>
    Please select an option...
  </Option>
  <Option value="optionOne">Option One</Option>
  <Option value="optionTwo">Option Two</Option>
  <Option value="optionThree">Option Three</Option>
</Select>
// import { Select } from '@contentful/forma-36-react-components';

<Select name="optionSelect" id="optionSelect">
  <Option value="" disabled selected>
    Please select an option...
  </Option>
  <Option value="optionOne">Option One</Option>
  <Option value="optionTwo">Option Two</Option>
  <Option value="optionThree">Option Three</Option>
</Select>
Hide source

Select with error

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

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

<Select id="optionSelect" name="optionSelect" hasError>
  <Option value="optionOne">Option 1</Option>
  <Option value="optionTwo">Long Option 2</Option>
</Select>
Hide source

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.