# Select

> A value picked from a short list, in a form. A Dropdown is a menu of actions; this is a field with a value, the look of an Input and the rows of every other menu. Inside a Field it takes the label and the error. For a long list, or one to search, use Combobox.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/select

## Install

```bash
npx @entrepta/cli@latest add select
```

Files: `primitives/select.tsx`, `primitives/kbd.tsx`, `primitives/input.tsx`, `lib/overlay.ts`.
npm packages: `class-variance-authority`, `@phosphor-icons/react`, `@radix-ui/react-select`.
Comes with: `kbd`, `input`, `overlay-lib`.

## Usage

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

<Field id="size" label="export size">
  <Select value={size} onValueChange={setSize}>
    <SelectTrigger>
      <SelectValue placeholder="Pick a size…" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>phone</SelectLabel>
        <SelectItem value="story" hint="1080×1920">story</SelectItem>
        <SelectItem value="square" hint="1080×1080">square</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</Field>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / onValueChange` | `string / (value: string) => void` | - | Controlled value. defaultValue for uncontrolled |
| `size` | `"sm" \| "md" \| "lg"` | "md" | The trigger's height, like an Input (SelectTrigger) |
| `hint` | `ReactNode` | - | A short note on the right of a row, left out of the trigger (SelectItem) |
| `disabled` | `boolean` | false | On the root for all of it, on an item for one row |