---
title: Select
description: Displays a list of options for the user to pick from—triggered by a button.

link:
  doc: https://kobalte.dev/docs/core/components/select
  api: https://kobalte.dev/docs/core/components/select#api-reference
---

<ComponentPreview name="select-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/select-demo.tsx

```

</ComponentPreview>

## Installation

<ComponentInstallation>

  <Step>
    <StepItem>Install the following dependencies:</StepItem>

    ```bash
    npm install @kobalte/core
    ```

    <StepItem>Copy and paste the following code into your project:</StepItem>

    <ComponentSourceTabs>

    ```tsx title="components/ui/select" file=<rootDir>/apps/docs/src/registry/ui/select.tsx

    ```

    ```tsx title="components/ui/select" file=<rootDir>/apps/unocss-playground/src/registry/ui/select.tsx

    ```

  </ComponentSourceTabs>

  </Step>

</ComponentInstallation>

## Usage

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectPortal,
  SelectTrigger,
  SelectValue,
} from "@components/ui/select"
```

```tsx
<Select
  options={[...]}
  itemComponent={(props) => (
    <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
  )}
>
  <SelectTrigger>
    <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
  </SelectTrigger>
  <SelectPortal>
    <SelectContent />
  </SelectPortal>
</Select>
```

## Examples

### Error

<ComponentPreview name="select-error-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/select-error-demo.tsx

```

</ComponentPreview>

## Changelog

#### 2025-11-13 Add `HiddenSelect` component

To improve accessibility and integration with form libraries, we have added `HiddenSelect` component.
