# Model select (goodtabs UI)

A select for AI models, each with a one-line description and mono meta.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/model-select.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/model-select`

## Usage

```tsx
import { ModelSelect } from "@/components/ui/model-select"

<ModelSelect
  models={[
    { value: "claude-fable-5-1", label: "Claude Fable 5.1", description: "Long agentic sessions.", meta: "1M context" },
    { value: "claude-haiku-5-5", label: "Claude Haiku 5.5", description: "Fastest for simple calls.", meta: "500K context" },
  ]}
  value={model}
  onValueChange={setModel}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| models | `{ value: string; label: string; description?: string; meta?: string; disabled?: boolean }[]` |  | The models to choose from, in order. |
| value, defaultValue, onValueChange | `string, string, (value: string) => void` |  | Controlled or uncontrolled, as on radix Select. |
| width | `string` | `"14rem"` | Width of the trigger, any CSS length. |
| placeholder | `string` | `"Choose a model"` | Trigger text before a choice. |
| size | `"sm" | "default"` | `"default"` | Trigger height: 28px or 32px. |
| aria-label | `string` | `"Model"` | Accessible name of the trigger. |

## When to use

- Choosing a model in a chat composer, playground or settings page
- Any select where each option needs a line of help and a figure such as a limit or price
- When the trigger must stay compact while the options carry detail

## When not to use

- For long lists that need search; build a combobox on Command instead
- For options without descriptions, use the plain shadcn Select
- For switching between two or three modes inline, use segmented-tabs

## Notes for agents

- A demo or parent that passes onValueChange must be a client component
- Items are built on radix Select.Item directly so only the label lands in the trigger; the description and meta stay in the list
- Options without a description render as single 32px rows; mix them freely with detailed ones
- The content opens in popper mode under the trigger and is at least 16rem wide; width sets the trigger only

Docs: https://ui.goodtabs.co/components/model-select