AI Model Selector
Picks the model a conversation runs on, with descriptions and availability.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-model-selectorNo npm packages are needed beyond what Dowel already requires.
import { ModelSelector } from "@/components/ui/ai-model-selector";Default
Ungrouped
With Unavailable Model
<ModelSelector>
| Prop | Type | Default |
|---|---|---|
models (required) | ModelOption[] | — |
defaultValue | string | — |
onValueChange | (value: string) => void | — |
placeholder | string | "Select a model" |
value | string | — |
Inherits Select's listbox keyboard model. Each option sets textValue to the model name so typeahead matches the name rather than the description. A disabled model shows and announces why it is unavailable — a disabled option with no reason reads as a broken interface.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes