Select

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

Page navigation navigation

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

Loading data for select...