# Model Selector
Source: https://ui.spencerwueste.com/docs/components/model-selector
Markdown: https://ui.spencerwueste.com/llm/components/model-selector.md

> Dropdown for choosing an AI model with search, groups, sub-menus, and locked items.

> Live preview: https://ui.spencerwueste.com/docs/components/model-selector (demo source: `src/demos/model-selector-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/model-selector.json
```

Manual install dependencies: `radix-ui class-variance-authority @heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/model-selector.json

## Usage

```tsx
import {
  ModelSelector,
  ModelSelectorContent,
  ModelSelectorRadioGroup,
  ModelSelectorRadioItem,
  ModelSelectorSearch,
  ModelSelectorTrigger,
} from "@/components/pandacoderz-ui/model-selector";
```

```tsx
<ModelSelector value={model} onValueChange={setModel} items={models}>
  <ModelSelectorTrigger />
  <ModelSelectorContent>
    <ModelSelectorSearch placeholder="Search models" />
    <ModelSelectorRadioGroup value={model} onValueChange={setModel}>
      {models.map((m) => (
        <ModelSelectorRadioItem key={m.value} value={m.value} title={m.title} description={m.description} icon={m.icon} />
      ))}
    </ModelSelectorRadioGroup>
  </ModelSelectorContent>
</ModelSelector>
```

Passing `items` lets the trigger render the selected model's title and icon, and lets `ModelSelectorEmpty` know when a search has no matches.

## API Reference

### ModelSelector

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | Selected model id. |
| `onValueChange` | `(value: string) => void` | Selection handler. |
| `items` | `Array<{ value, title, description?, icon? }>` | Catalog used by the trigger and search. |

### ModelSelectorTrigger

| Prop | Type | Description |
| --- | --- | --- |
| `variant` | `"filled" \| "outline" \| "ghost"` | Trigger style. |

### ModelSelectorRadioItem / ModelSelectorCheckboxItem

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `string` | Primary label. Filtered by search. |
| `description` | `string` | Secondary label. |
| `icon` | `ComponentType<{ className?: string }>` | Leading icon. |
| `disabled` | `boolean` | Renders a lock icon and blocks selection. |
| `indicator` | `ReactNode` | Custom selected indicator. |

Also exported: `ModelSelectorGroup`, `ModelSelectorLabel`, `ModelSelectorSeparator`, `ModelSelectorSub`, `ModelSelectorSubTrigger`, `ModelSelectorSubContent`, `ModelSelectorEmpty`.