Select

A Select, often referred to as a dropdown, allows users to choose a single option from a pop-up list. When used with optional placeholder text, the user can also return the Select to a "nothing selected" state.

Choose an option...

Figma

React

Bootstrap

Native

Design guidance

When and how to use this

Use a Select when the user needs to make a single choice from a list of options. Selects are particularly useful for longer lists of options, or cases where you want to save space as compared to a group of Radio buttons. A Select is also useful in cases where a user can optionally decide not to choose anything.

When to consider something else

For cases where a user needs to choose one and only one of 2-3 options, or cases where it's beneficial to the user to see all of the options before interacting with the field, you might consider using a group of Radio buttons instead of a Select.

Figma

Drag in a Select Field from the Compositions section in the Form Controls v2 library in the Assets pane in your Figma file. A Select component is nested within, which provides 3 size variants. Default has a 48px height, and should cover nearly all use cases. We do also offer Small (32px) and Tiny (24px), but these should be reserved for especially compact UI designs. Options for displaying an icon in the Select, and all states (Idle, Focus, Disabled, and so on) are also available. You can also drag in a Select on its own from the Components section, but we recommend using the Field composition in most cases.

React

Select composes Chakra's Select. We offer size variants that align with those in TextInput. As with TextInput, we recommend wrapping your Select in a Field to get a <label> element and error display below the field (if an error is present), which will also trigger isInvalid on the Select.

live

<Stack direction="column" spacing="400">
  <Select>
    <option value="option1">I'm idle</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </Select>
  <Select isInvalid>
    <option value="option1">I'm invalid</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </Select>
  <Select isDisabled>
    <option value="option1">I'm disabled</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </Select>
</Stack>

Prop	Description
`size`	Sets the size of the Select and its associated label. Use `small` or `tiny` only for especially compact interfaces.
`width`	Select defaults to a `width` of `100%`. Set `width: auto` and `display: inline-block` or use flexbox to layout a Select with automatic width. The `isTruncated` prop defaults to true for cases when the option label contents do not fit in the allotted width.
`placeholder`	Sets placeholder text for the Select.
`isDisabled`	If `true` the Select will be disabled.
`isInvalid`	If `true` the Select will be invalid and its `aria-invalid` will be set to `true`

Bootstrap

Bootstrap provides styles for Select and accompanying <label> elements, using the .form-select and .form-label classes. We match Figma and React size variants via .form-select-sm and .form-select-tiny. Using Bootstrap's .form-select-lg maps to our default (48px height) variant.