---
title: Select
description: "`Select` is a component used for allowing a user to choose values from a list of options."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/select
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-select--basic
---

```tsx
<Select.Root placeholder="Select a character">
  <Select.Option value="木ノ下和也">木ノ下和也</Select.Option>
  <Select.Option value="一ノ瀬ちづる">一ノ瀬ちづる</Select.Option>
  <Select.Option value="七海麻美">七海麻美</Select.Option>
  <Select.Option value="更科瑠夏">更科瑠夏</Select.Option>
  <Select.Option value="桜沢墨">桜沢墨</Select.Option>
  <Select.Option value="八重森みに">八重森みに</Select.Option>
</Select.Root>
```

## Usage

```tsx
import { Select } from "@yamada-ui/react"
```

```tsx
import { Select } from "@/components/ui"
```

```tsx
import { Select } from "@workspaces/ui"
```

```tsx
<Select.Root>
  <Select.Group>
    <Select.Option />
    <Select.Label />
  </Select.Group>
  <Select.Separator />
</Select.Root>
```

### Group Options

```tsx
<Select.Root placeholder="Select a character">
  <Select.Option value="水原千鶴">水原千鶴</Select.Option>
  <Select.Group>
    <Select.Label>主要人物</Select.Label>
    <Select.Option value="木ノ下和也">木ノ下和也</Select.Option>
    <Select.Option value="一ノ瀬ちづる">一ノ瀬ちづる</Select.Option>
    <Select.Option value="七海麻美">七海麻美</Select.Option>
    <Select.Option value="更科瑠夏">更科瑠夏</Select.Option>
    <Select.Option value="桜沢墨">桜沢墨</Select.Option>
    <Select.Option value="八重森みに">八重森みに</Select.Option>
  </Select.Group>

  <Select.Separator />

  <Select.Group label="主要人物の関係者">
    <Select.Option value="木ノ下和">木ノ下和</Select.Option>
    <Select.Option value="一ノ瀬小百合">一ノ瀬小百合</Select.Option>
    <Select.Option value="木部芳秋">木部芳秋</Select.Option>
    <Select.Option value="栗林駿">栗林駿</Select.Option>
  </Select.Group>
</Select.Root>
```

### Use Items

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "水原千鶴", value: "水原千鶴" },
    {
      items: [
        { label: "木ノ下和也", value: "木ノ下和也" },
        { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
        { label: "七海麻美", value: "七海麻美" },
        { label: "更科瑠夏", value: "更科瑠夏" },
        { label: "桜沢墨", value: "桜沢墨" },
        { label: "八重森みに", value: "八重森みに" },
      ],
      label: "主要人物",
    },
    {
      items: [
        { label: "木ノ下和", value: "木ノ下和" },
        { label: "一ノ瀬小百合", value: "一ノ瀬小百合" },
        { label: "木部芳秋", value: "木部芳秋" },
        { label: "栗林駿", value: "栗林駿" },
      ],
      label: "主要人物の関係者",
    },
  ],
  [],
)

return <Select.Root items={items} placeholder="Select a character" />
```

### Change Variant

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)
```

### Change Size

```tsx preview functional
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <Select.Root
          key={size}
          size={size}
          items={items}
          placeholder={`Size: ${size}`}
        />
      )}
    </For>
  </VStack>
)
```

### Change Color Scheme

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["success", "warning"]}>
      {(colorScheme) => (
        <Select.Root
          key={colorScheme}
          colorScheme={colorScheme}
          items={items}
          placeholder={toTitleCase(colorScheme)}
        />
      )}
    </For>
  </VStack>
)
```

### Set Default Value

To set a default value, set a value in `defaultValue`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    defaultValue="一ノ瀬ちづる"
    items={items}
    placeholder="Select a character"
  />
)
```

### Enable Multiple Selection

To enable multiple selection, set `multiple` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return <Select.Root multiple items={items} placeholder="Select a character" />
```

### Limit Maximum Selection Count

To limit the maximum selection count, set a number to `max`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    multiple
    max={3}
    placeholder="Select a character"
  />
)
```

### Change Separator

To change the separator, set a string to `separator`. By default, `,` is set.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    multiple
    placeholder="Select a character"
    separator=";"
  />
)
```

### Enable Clear Button

To enable the clear button, set `clearable` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return <Select.Root clearable items={items} placeholder="Select a character" />
```

### Change Offset

To change the offset, set values to `gutter` or `offset`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)
return (
  <Select.Root items={items} placeholder="Select a character" gutter={16} />
)
```

### Change Animation

To change the animation, set values like `"block-start"` or `"inline-end"` to `animationScheme`.
By default, `"scale"` is set.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    animationScheme="inline-start"
    items={items}
    placeholder="Select a character"
  />
)
```

### Change Placement

To change the placement, set values like `"start"` or `"end-end"` to `placement`. By default, `"end"` is set.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    animationScheme="inline-start"
    items={items}
    placeholder="Select a character"
    placement="center-end"
    rootProps={{ w: "xs" }}
  />
)
```

### Exclude Placeholder from Options

To exclude the placeholder from options, set `includePlaceholder` to `false`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    includePlaceholder={false}
    items={items}
    placeholder="Select a character"
  />
)
```

### Block Scroll

To block scroll, set `blockScrollOnMount` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    blockScrollOnMount
    placeholder="Select a character"
  />
)
```

### Close Dropdown On Scroll

To close the dropdown on scroll, set `closeOnScroll` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root closeOnScroll items={items} placeholder="Select a character" />
)
```

### Don't Close Dropdown on Selection

To not close the dropdown on selection, set `closeOnSelect` to `false`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { closeOnSelect: true, label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    closeOnSelect={false}
    items={items}
    placeholder="Select a character"
  />
)
```

### Disable Close on Blur

To disable close on blur, set `closeOnBlur` to `false`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    closeOnBlur={false}
    items={items}
    placeholder="Select a character"
  />
)
```

### Disable Close Dropdown on ESC Key Press

To disable close on ESC key press, set `closeOnEsc` to `false`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    closeOnEsc={false}
    items={items}
    placeholder="Select a character"
  />
)
```

### Disable Options

To disable specific options, set `disabled` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { disabled: true, label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return <Select.Root items={items} placeholder="Select a character" />
```

### Disable

To disable, set `disabled` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          disabled
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)
```

### Read-Only

To read-only, set `readOnly` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { disabled: true, label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          readOnly
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)
```

### Invalid

To make invalid, set `invalid` to `true`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <Select.Root
          key={variant}
          variant={variant}
          invalid
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)
```

### Change Border Color

To change the border color, set a value to `focusBorderColor` or `errorBorderColor`.

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <VStack>
    <Select.Root
      focusBorderColor="green.500"
      items={items}
      placeholder="Custom border color"
    />

    <Select.Root
      errorBorderColor="orange.500"
      invalid
      items={items}
      placeholder="Custom border color"
    />
  </VStack>
)
```

### Customize Icon

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)
return (
  <VStack>
    <Select.Root
      placeholder="Select a character"
      iconProps={{ color: "orange" }}
      items={items}
    />

    <Select.Root
      icon={<ChevronsDownIcon />}
      placeholder="Select a character"
      items={items}
    />
  </VStack>
)
```

### Customize Option Icon

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    items={items}
    placeholder="Select a character"
    optionProps={{ icon: <HeartIcon /> }}
  />
)
```

### Customize Multiple Selection Display

```tsx
const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    multiple
    items={items}
    placeholder="Select a character"
    render={({ label, onClear }) => (
      <Tag size="sm" me="{gap}" onClose={onClear}>
        {label}
      </Tag>
    )}
  />
)
```

### Control

```tsx
const [value, setValue] = useState<string>("木ノ下和也")

const items = useMemo<Select.Item[]>(
  () => [
    { label: "木ノ下和也", value: "木ノ下和也" },
    { label: "一ノ瀬ちづる", value: "一ノ瀬ちづる" },
    { label: "七海麻美", value: "七海麻美" },
    { label: "更科瑠夏", value: "更科瑠夏" },
    { label: "桜沢墨", value: "桜沢墨" },
    { label: "八重森みに", value: "八重森みに" },
  ],
  [],
)

return (
  <Select.Root
    placeholder="Select a character"
    value={value}
    onChange={setValue}
    items={items}
  />
)
```

## Props

### Select.Root

| Prop                   | Default      | Type                                                                                                                                                                                                                                                                                                | Description                                                                                                                                                                                    |
| ---------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as`                   | -            | `As`                                                                                                                                                                                                                                                                                                | The HTML element to render.                                                                                                                                                                    |
| `asChild`              | -            | `boolean`                                                                                                                                                                                                                                                                                           | Merges its props onto its immediate child.                                                                                                                                                     |
| `css`                  | -            | `CSSObject \| CSSObject[]`                                                                                                                                                                                                                                                                          | The CSS object.                                                                                                                                                                                |
| `colorScheme`          | -            | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                                                                                                                                           | Set color scheme variables.                                                                                                                                                                    |
| `size`                 | `"md"`       | `"lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                                                                                                                                                                                                                              | The size of the component.                                                                                                                                                                     |
| `variant`              | `"outline"`  | `"filled" \| "flushed" \| "outline" \| "plain"`                                                                                                                                                                                                                                                     | The variant of the component.                                                                                                                                                                  |
| `animationScheme`      | `"scale"`    | `"none" \| "scale" \| SimplePlacement`                                                                                                                                                                                                                                                              | The animation of the element.                                                                                                                                                                  |
| `autoUpdate`           | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, automatically updates the position of the floating element when necessary.                                                                                                          |
| `blockScrollOnMount`   | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, scrolling will be disabled on the `body` when the modal opens.                                                                                                                      |
| `clearable`            | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, display the clear icon.                                                                                                                                                             |
| `clearIcon`            | -            | `ReactNode`                                                                                                                                                                                                                                                                                         | The icon to be used in the clear button.                                                                                                                                                       |
| `closeOnBlur`          | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the popover will close when you blur out it by clicking outside or tabbing out.                                                                                                     |
| `closeOnEsc`           | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the popover will hide on pressing Esc key.                                                                                                                                          |
| `closeOnScroll`        | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the popover will hide on scroll.                                                                                                                                                    |
| `closeOnSelect`        | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the list element will be closed when value is selected.                                                                                                                             |
| `contentProps`         | -            | `SelectContentProps`                                                                                                                                                                                                                                                                                | Props for content element.                                                                                                                                                                     |
| `defaultOpen`          | -            | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the element will be initially opened.                                                                                                                                               |
| `defaultValue`         | -            | `Multiple extends true ? string[] : string`                                                                                                                                                                                                                                                         | The initial value of the select.                                                                                                                                                               |
| `disabled`             | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the combobox will be disabled.                                                                                                                                                      |
| `duration`             | `0.2`        | `MotionTransitionProps["duration"]`                                                                                                                                                                                                                                                                 | The animation duration.                                                                                                                                                                        |
| `elementProps`         | -            | `InputGroup.ElementProps`                                                                                                                                                                                                                                                                           | The props for the end element.                                                                                                                                                                 |
| `elements`             | -            | `{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }`                                                                                                                                                                                               | Object containing the reference and floating elements.                                                                                                                                         |
| `errorBorderColor`     | -            | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`                                                                                                                                   | The border color when the input is invalid.                                                                                                                                                    |
| `flip`                 | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.                                                                                        |
| `focusBorderColor`     | -            | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`                                                                                                                                   | The border color when the input is focused.                                                                                                                                                    |
| `focusOnClear`         | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the field will be focused when the clear icon is clicked.                                                                                                                           |
| `groupProps`           | -            | `Omit<SelectGroupProps, "children" \| "label">`                                                                                                                                                                                                                                                     | Props for group element.                                                                                                                                                                       |
| `gutter`               | `8`          | `number`                                                                                                                                                                                                                                                                                            | The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.                                                                                 |
| `icon`                 | -            | `ReactNode`                                                                                                                                                                                                                                                                                         | The icon to be used in the select.                                                                                                                                                             |
| `iconProps`            | -            | `SelectIconProps`                                                                                                                                                                                                                                                                                   | Props for icon element.                                                                                                                                                                        |
| `includePlaceholder`   | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, include placeholder in options.                                                                                                                                                     |
| `invalid`              | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the field will be invalid.                                                                                                                                                          |
| `items`                | `[]`         | `ComboboxItem[]`                                                                                                                                                                                                                                                                                    | If provided, generate options based on items.                                                                                                                                                  |
| `matchWidth`           | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.                                                 |
| `max`                  | -            | `number`                                                                                                                                                                                                                                                                                            | The maximum selectable value.                                                                                                                                                                  |
| `middleware`           | -            | `(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: Platform; strategy: Strategy; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; } \| null \| undefined)[]` | Array of middleware objects to modify the positioning or provide data for rendering.                                                                                                           |
| `multiple`             | `false`      | `Multiple`                                                                                                                                                                                                                                                                                          | If `true`, the select will be multiple.                                                                                                                                                        |
| `name`                 | -            | `string`                                                                                                                                                                                                                                                                                            | The `name` attribute of the input element.                                                                                                                                                     |
| `offset`               | -            | `[number, number]`                                                                                                                                                                                                                                                                                  | The main and cross-axis offset to displace popper element from its reference element.                                                                                                          |
| `onChange`             | -            | `(value: Multiple extends true ? string[] : string) => void`                                                                                                                                                                                                                                        | The callback invoked when value state changes.                                                                                                                                                 |
| `onClose`              | -            | `() => void \| Promise<void>`                                                                                                                                                                                                                                                                       | Callback invoked to close the element.                                                                                                                                                         |
| `onOpen`               | -            | `() => void \| Promise<void>`                                                                                                                                                                                                                                                                       | Callback invoked to open the element.                                                                                                                                                          |
| `open`                 | -            | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the element will be opened.                                                                                                                                                         |
| `openOnClick`          | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the combobox will be opened when click on the field.                                                                                                                                |
| `openOnEnter`          | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the combobox will be opened when enter is pressed.                                                                                                                                  |
| `openOnSpace`          | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the combobox will be opened when space is pressed.                                                                                                                                  |
| `optionProps`          | -            | `Omit<SelectOptionProps, "children" \| "value">`                                                                                                                                                                                                                                                    | Props for option element.                                                                                                                                                                      |
| `placeholder`          | -            | `string`                                                                                                                                                                                                                                                                                            | The placeholder for select.                                                                                                                                                                    |
| `placeholderProps`     | -            | `Omit<SelectOptionProps, "children" \| "value">`                                                                                                                                                                                                                                                    | Props for placeholder element.                                                                                                                                                                 |
| `placement`            | `"end"`      | `Direction`                                                                                                                                                                                                                                                                                         | The placement of the popper relative to its reference.                                                                                                                                         |
| `platform`             | -            | `Platform`                                                                                                                                                                                                                                                                                          | Custom or extended platform object.                                                                                                                                                            |
| `preventOverflow`      | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.                                                                                        |
| `readOnly`             | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the combobox will be readonly.                                                                                                                                                      |
| `render`               | -            | `(props: SelectRenderProps) => ReactNode`                                                                                                                                                                                                                                                           | The function to render the selected items.                                                                                                                                                     |
| `required`             | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the field will be required.                                                                                                                                                         |
| `rootProps`            | -            | `InputGroup.RootProps`                                                                                                                                                                                                                                                                              | Props for root element.                                                                                                                                                                        |
| `selectFocusRef`       | -            | `RefObject<HTMLElement \| null>`                                                                                                                                                                                                                                                                    | The `ref` of the element that should receive focus when selected.                                                                                                                              |
| `selectOnSpace`        | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the item will be selected when space is pressed.                                                                                                                                    |
| `separator`            | `","`        | `string`                                                                                                                                                                                                                                                                                            | The visual separator between each value.                                                                                                                                                       |
| `strategy`             | `"absolute"` | `Strategy`                                                                                                                                                                                                                                                                                          | The CSS positioning strategy to use.                                                                                                                                                           |
| `transferFocus`        | `true`       | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, the focus will be transferred to the popover content when the tab key is pressed.                                                                                                   |
| `value`                | -            | `Multiple extends true ? string[] : string`                                                                                                                                                                                                                                                         | The value of the select.                                                                                                                                                                       |
| `whileElementsMounted` | -            | `(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void`                                                                                                                                                                                                           | A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`). |
| `wrap`                 | `false`      | `boolean`                                                                                                                                                                                                                                                                                           | If `true`, wrap the value text.                                                                                                                                                                |

### Select.Group

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `label`       | -       | `ReactNode`                                                                                                               | The label of the group.                    |
| `labelProps`  | -       | `SelectLabelProps`                                                                                                        | Props for the label component.             |

### Select.Label

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Select.Option

| Prop            | Default | Type                                                                                                                      | Description                                       |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| `as`            | -       | `As`                                                                                                                      | The HTML element to render.                       |
| `asChild`       | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.        |
| `css`           | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                   |
| `colorScheme`   | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                       |
| `closeOnSelect` | -       | `boolean`                                                                                                                 | If `true`, the item will be closed when selected. |
| `disabled`      | `false` | `boolean`                                                                                                                 | If `true`, the item will be disabled.             |
| `icon`          | -       | `ReactNode`                                                                                                               | The icon to be used in the select option.         |
| `selected`      | -       | `boolean`                                                                                                                 | If `true`, the item will be selected.             |
| `value`         | -       | `string`                                                                                                                  | The value of the item.                            |

### Select.Separator

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

Currently, this section is being updated due to the migration of v2.