AI primitive
ModelPicker
Dropdown for choosing a model with hint text per option. Use standalone or as part of ChatComposer.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { ModelPicker } from '@/components/molecules'
<ModelPicker
models={[
{ id: 'sonnet', label: 'Claude Sonnet 4.6', hint: 'Most capable' },
{ id: 'haiku', label: 'Claude Haiku 4.5', hint: 'Fastest' },
]}
value="sonnet"
onChange={(id) => setModel(id)}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| models | Model[] | [] | Available model options. |
| value | string | — | Selected model id. |
| onChange | (id: string) => void | — | Called with the new model id. |
| compact | boolean | false | Single-row inline render for sidebars. |
Accessibility
role
Native <select> for keyboard + screen reader compatibility by default.
keyboard
Type-to-search and arrow-key navigation work natively.