Select

Use the select component to enable selection of one option from a list.

On this page

import {Select} from '@primer/react-brand'

Examples

Default

<Select>
  <Select.Option value="mona">Monalisa</Select.Option>
  <Select.Option value="hubot">Hubot</Select.Option>
</Select>

<Select>
  <Select.Option value="mona">Monalisa</Select.Option>
  <Select.Option value="hubot">Hubot</Select.Option>
</Select>

Placeholder

<Select defaultValue="">
  <Select.Option value="" disabled>
    Select a handle
  </Select.Option>
  <Select.Option value="mona">Monalisa</Select.Option>
  <Select.Option value="hubot">Hubot</Select.Option>
</Select>

<Select defaultValue="">
  <Select.Option value="" disabled>
    Select a handle
  </Select.Option>
  <Select.Option value="mona">Monalisa</Select.Option>
  <Select.Option value="hubot">Hubot</Select.Option>
</Select>

Option groups

<Select defaultValue="">
  <Select.Option value="" disabled>
    Select a country
  </Select.Option>

  <Select.OptGroup label="Asia">
    <Select.Option value="cn">China</Select.Option>
  </Select.OptGroup>
  <Select.OptGroup label="Europe">
    <Select.Option value="fr">France</Select.Option>
    <Select.Option value="it">Italy</Select.Option>
    <Select.Option value="es">Spain</Select.Option>
    <Select.Option value="uk">United Kingdom</Select.Option>
  </Select.OptGroup>
  <Select.OptGroup label="Americas">
    <Select.Option value="mx">Mexico</Select.Option>
    <Select.Option value="us">United States</Select.Option>
  </Select.OptGroup>
</Select>

<Select defaultValue="">
  <Select.Option value="" disabled>
    Select a country
  </Select.Option>

  <Select.OptGroup label="Asia">
    <Select.Option value="cn">China</Select.Option>
  </Select.OptGroup>
  <Select.OptGroup label=

Site navigation

On this page

Select

Examples

Default

Placeholder

Option groups