Select

Select is for choosing a single option from a dropdown menu of predefined choices.

Page navigation navigation

React

readyReviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

React examples

Default

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
</FormControl>

Custom size

Choose input size based on available space and context. Use smaller sizes in tight spaces and larger sizes for open areas or it feels out of proportion with adjacent large elements.

Small

Medium (default)

Large

<Stack direction="horizontal" wrap="wrap">
  <FormControl>
    <FormControl.Label>Small</FormControl.Label>
    <Select size="small">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select>
  </FormControl>
  <FormControl>
    <FormControl.Label>Medium (default)</FormControl.Label>
    <Select size="medium">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select>
  </FormControl>
  <FormControl>
    <FormControl.Label>Large</FormControl.Label>
    <Select size="large">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select>
  </FormControl>
</Stack>

<Stack direction="horizontal" wrap="wrap">
  <FormControl>
    <FormControl.Label>Small</FormControl.Label>
    <Select size="small">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select>
  </FormControl>
  <FormControl>
    <FormControl.Label>Medium (default)</FormControl.Label>
    <Select size="medium">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select>
  </FormControl>
  <FormControl>
    <FormControl.Label>Large</FormControl.Label>
    <Select size="large">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select>
  </FormControl>
</Stack>

With a caption

LabelThis is a caption

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
  <FormControl.Caption>This is a caption</FormControl.Caption>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
  <FormControl.Caption>This is a caption</FormControl.Caption>
</FormControl>

With a placeholder

Show placeholder text if no option is selected. It’s hidden in required fields once a selection is made.

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select placeholder="No choice selected">
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select placeholder="No choice selected">
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
</FormControl>

With option groups

Label

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.OptGroup label="Group one">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
    </Select.OptGroup>
    <Select.OptGroup disabled label="Group two">
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select.OptGroup>
  </Select>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.OptGroup label="Group one">
      <Select.Option value="one">Choice one</Select.Option>
      <Select.Option value="two">Choice two</Select.Option>
      <Select.Option value="three">Choice three</Select.Option>
      <Select.Option value="four">Choice four</Select.Option>
    </Select.OptGroup>
    <Select.OptGroup disabled label="Group two">
      <Select.Option value="five">Choice five</Select.Option>
      <Select.Option value="six">Choice six</Select.Option>
    </Select.OptGroup>
  </Select>
</FormControl>

With a validation message

Label

Something went wrong

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
  <FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
</FormControl>

<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.Option value="one">Choice one</Select.Option>
    <Select.Option value="two">Choice two</Select.Option>
    <Select.Option value="three">Choice three</Select.Option>
    <Select.Option value="four">Choice four</Select.Option>
    <Select.Option value="five">Choice five</Select.Option>
    <Select.Option value="six">Choice six</Select.Option>
  </Select>
  <FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
</FormControl>

Props

Select

Name	Default	Description
block	`false`	`boolean` Creates a full width input element
contrast	`false`	`boolean` Changes background color to a higher contrast color
placeholder		`string` Placeholder text to show when no option is selected. This option is hidden from the dropdown menu when the 'required' prop is set
size		`'small' \| 'medium' \| 'large'` Creates a smaller or larger input than the default.
validationStatus		`'error' \| 'success'` Style the input to match the status