← All components
Interaction / component
Model Selector
A searchable grouped model picker with caller-owned choices and a draft-preserving prompt composer.
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Options and value belong to the caller. No provider catalog, pricing, availability or model response is fetched. Example configurations are explicitly illustrative.
- Search covers option name, provider and description. Arrow keys move through enabled choices; Enter requests one selection. Modal focus is trapped and dismissal returns focus.
- Missing onValueChange disables choices while keeping search/dismissal usable. Controlled open without onOpenChange disables the trigger and mounts no modal. Unknown, disabled or removed values show unavailable without choosing a replacement.
- The prompt composer prepares a real local summary of the selected label and entered prompt; it does not call a model. Pause/Replay and appearance changes preserve draft, choice and summary. Reset restores the sample.
- Up to256 unique options; own string fields only, id128/name200/provider200/description1000. First valid duplicate wins. Scoped comfortable/compact rows remain at least44px high. Caller ReactNode icons remain opaque; consumers own valid cleared node content. No remote provider logo is fetched.
React19.2Modern browsers
AI Elements — Vercel, Inc. · Apache-2.0; full notice retained.
shadcn/ui · MIT; full notice retained.
cmdk · MIT; full notice retained.
Radix UI · MIT; full notice retained.
Geist · SIL Open Font License1.1; bundled font and notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options (required) | readonly ModelOption[] | required | Caller options: id, name, provider, optional description/disabled/icon. Up to256 unique own records; id128/name200/provider200/description1000. No provider catalog or logo request. |
value (required) | string | null | required | Authoritative caller selection; null uses placeholder. Unknown/removed/disabled selection is unavailable with no replacement callback. |
onValueChange | (id: string) => void | undefined | Explicit enabled-item selection request. Missing callback disables choices while configured dialog search/dismissal stays usable. |
open | boolean | undefined | Optional authoritative dialog state. Requires onOpenChange, otherwise trigger is disabled and no dialog mounts. |
onOpenChange | (open: boolean) => void | undefined | User dialog open/dismiss request. Omitted open allows local state. |
disabled | boolean | false | Disables the trigger and prevents opening. |
placeholder | string | Choose a model | Trigger text when caller value is null. |
searchPlaceholder | string | Search models | Search input placeholder. |
triggerLabel | string | undefined | Accessible trigger name; omitted uses the visible selected/placeholder text. |
showDescriptions | boolean | true | Includes caller description under each option. |
density | comfortable | compact | comfortable | Scoped row density; both retain at least44px targets. |
className | string | undefined | Additional scoped trigger class. |