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.

Import

import { Select } from '@contentful/f36-components';
// or
import { Select } from '@contentful/f36-forms';

Examples

Using as a controlled select

Controlled components in React are those in which form data is handled by the component’s state.

For using the Select as a controlled component, you need to:

  • Pass one of the options as the value property, with this property it will already be a controlled component;
  • Pass a onChange handler, so you can use it to update the value of value;

Using as an uncontrolled select

Uncontrolled components are those for which the form data is handled by the DOM itself. “Uncontrolled” refers to the fact that these components are not controlled by React state.

You can use the Select as an uncontrolled component, for that you can:

  • Set the defaultValue property, it will ensure that the select value can be altered normally.
  • Don't set the value property as it will make the select controlled.

Select with label

In order to provide the best experience for your users consider using label that we provide for you in the FormControl

Select with validation

There might be cases where you would need to include the help text or validation message into your form. Read more about those elements in FormControl documentation

Select disabled state

Select with placeholder

Select with error

Props (API reference)

Open in Storybook

Select

Name

Type

Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

defaultValue
string

undefined
isDisabled
false
true

isInvalid
false
true

isRequired
false
true

onChange
ChangeEventHandler<HTMLSelectElement>

size
"small"
"medium"

medium
testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-select
value
string

undefined
willBlurOnEsc
false
true

true

Select Option

Name

Type

Default

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

isDisabled
false
true

testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-select-option

Content guidelines

  • 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.
  • 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
  • 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

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.

Accessibility

  • Select should contain a label, if needed help message and validation message if needed.
  • Select should always a name property.