# Select

> Select menu with a soft field trigger and popup list.

Registry name: `select`. HTML docs: https://ui.anuragroy.dev/component/select.

## Install

```bash
npx shadcn@latest add https://ui.anuragroy.dev/r/select.json
```

If the website is down: `npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/select.json`.

Registry JSON: https://ui.anuragroy.dev/r/select.json (GitHub: https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/select.json).

## Import

Import paths follow the consumer `components.json` aliases. After a default install:

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

## Usage

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

const items = { apple: "Apple", orange: "Orange" }

export function Example() {
  return (
    <Select defaultValue="apple" items={items}>
      <SelectTrigger className="w-56">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="orange">Orange</SelectItem>
      </SelectContent>
    </Select>
  )
}
```

## API

### Select

Base UI Select root. Pass `items` for value/label lookup.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | Record<string, ReactNode> \| array | — |  |
| `defaultValue` | string | — |  |
| `value` | string | — |  |
| `onValueChange` | (value: string) => void | — |  |

## Notes

- Also exports `SelectGroup`, `SelectLabel`, `SelectSeparator`, and scroll buttons.

## See also

- [HTML page](https://ui.anuragroy.dev/component/select): Preview and the same docs in the site chrome.
- [Registry item](https://ui.anuragroy.dev/r/select.json): Source files and dependencies.
- [Catalog](https://ui.anuragroy.dev/component): All components.
- [llms.txt](https://ui.anuragroy.dev/llms.txt): Agent index for this library.