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

<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.

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

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

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.

Use the Select.ItemGroup component to group select options.

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

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

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

Use the disabled prop to disable the select component.

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

Use the multiple prop to allow multiple selections.

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

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

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

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.

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

-<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.

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

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

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

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

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