Select

Usage

jsx

import { Select } from "@chakra-ui/react"

jsx

<Select.Root>
  <Select.HiddenSelect />
  <Select.Label />

  <Select.Control>
    <Select.Trigger>
      <Select.ValueText />
    </Select.Trigger>
    <Select.IndicatorGroup>
      <Select.Indicator />
      <Select.ClearTrigger />
    </Select.IndicatorGroup>
  </Select.Control>

  <Select.Positioner>
    <Select.Content>
      <Select.Item />

      <Select.ItemGroup>
        <Select.ItemGroupLabel />
        <Select.Item />
      </Select.ItemGroup>
    </Select.Content>
  </Select.Positioner>
</Select.Root>

To setup the select, use useListCollection to manage the list collection.

Examples

Sizes

Use the size prop to change the size of the select component.

Variants

Use the variant prop to change the appearance of the select component.

Color Palette

The Select component is designed to be neutral-colored by default for consistency across form elements. To apply a color palette, style the trigger and indicator components directly using the colorPalette token.

Option Group

Use the Select.ItemGroup component to group select options.

Controlled

Use the value and onValueChange props to control the select component.

Async Loading

Here's an example of how to populate the select collection from a remote source.

Hook Form

Here's an example of how to use the Select component with react-hook-form.

Disabled

Use the disabled prop to disable the select component.

Invalid

Here's an example of how to compose the Select component with the Field component to display an error state.

Multiple

Use the multiple prop to allow multiple selections.

Positioning

Use the positioning prop to control the underlying floating-ui options of the select component.

Clear Trigger

Render the Select.ClearTrigger component to show a clear button. Clicking the clear button will clear the selected value.

Overflow

When the options are too many, the options will overflow the container due to the maxHeight set.

Item Description

Here's an example of how to render a description for each item.

Here's an example of how to use the Select within a Popover component.

Open From Dialog

To use the Select within a Dialog, you need to avoid portalling the Select.Positioner to the document's body.

diff

-<Portal>
  <Select.Positioner>
    <Select.Content>
    </Select.Content>
  </Select.Positioner>
-</Portal>

If you have set scrollBehavior="inside" on the Dialog, you need to:

Set the select positioning to fixed to avoid the select from being clipped by the dialog.
Set hideWhenDetached to true to hide the select when the trigger is scrolled out of view.

tsx

<Select.Root positioning={{ strategy: "fixed", hideWhenDetached: true }}>
</Select.Root>

Avatar Select

Here's an example of how to compose the Select and the Avatar.

Country Select

Here's an example of how to use the Select component to select a country.

Icon Button

Here's an example of how to trigger the select component with an IconButton.

Props

Root

Explorer

Explore the Select component parts interactively. Click on parts in the sidebar to highlight them in the preview.