ModelPicker
StableA small button that opens a list for choosing how the assistant answers, with optional thinking time and limit messages.
Also known as model selector, model switcher, model dropdown
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Modes with thinking time
<ModelPicker
models={[
{ id: "auto", name: "Auto", description: "Chooses a model for each question.", badge: "Auto", auto: true },
{ id: "fast", name: "Fast", description: "Quick answers for everyday questions." },
{ id: "thinking", name: "Thinking", description: "Works through harder problems before it answers." },
]}
effortOptions={[{ value: "standard", label: "Standard" }, { value: "extended", label: "Extended" }]}
/>An Auto option, two fixed options and a Standard or Extended switch.
When to use it
A compact button that opens a short list of ways the assistant can answer, each with a one-line description. It stays honest about what happened: it names the option that answered when Auto chose, and says why an option is off when a limit is reached.
Made of: Button · Option list · Option name · Option description · Tag · Who answered line · Limit reason line · Thinking time switch
Use it for
- Letting people choose between a few answer modes, such as Fast and Thinking.
- Showing which option actually answered when Auto is picked.
- Explaining that a limit was reached and naming the option used instead.
- Setting how long the assistant thinks, with the optional switch.
Not for
- Turning tools such as web search on or off: use ToolMenu.
- Two or three choices that should always be visible: use SegmentedControl.
- A usage limit that needs its own message: use RateLimitNotice.
Do and avoid
Auto
We pick the best option for you.
Do
- Write a description that says when to choose each option.
- Whenever Auto is picked, show which option answered.
- Name the replacement when a limit is reached.
- Keep option names short enough to fit the button.
Avoid
- Do not hide an option behind Auto with no way to pick it directly.
- Do not remove turned-off options. Show them with the reason.
- Do not use it for settings that are not a single choice. Use Switch or checkboxes.
On a phone
- The trigger keeps its 32px height and has a 44px tap area on touch screens. It shortens a long model name with an ellipsis.
- On a phone the panel opens as a bottom sheet with a backdrop. On wider screens it is an anchored popover 20rem wide, never wider than the screen minus 2rem.
- Each model row and the thinking time options have a 44px tap area on touch screens.
Seen in products
- ChatGPT: the GPT-5 picker offers Auto, Fast and Thinking, and was reintroduced in August 2025 after backlash.
- ChatGPT: a thinking time control in the web composer offers Standard and Extended, and Light and Heavy for Pro.
- Gemini: the picker offers Fast, Thinking and Pro, per its December 2025 release note.
- Claude: extended thinking is toggled from the plus menu, with a separate model selector.
- ChatGPT: after the weekly cap, conversations fall back to Thinking mini.
- Vercel AI Elements ships a Model Selector component, and Shape of AI lists Modes and Model management as Tuners.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| modelsrequired | ModelOption[] | none | Options with id, name, optional description, badge, auto and disabled. |
| value | string | none | Selected id. Omit for uncontrolled use. |
| defaultValue | string | none | Initial id when uncontrolled. Defaults to the first model. |
| onChange | (id: string) => void | none | Called when an enabled option is chosen. |
| label | string | "Model" | Accessible name for the trigger, the panel and the radio group. |
| routedId | string | none | Id of the model that answered. Shown only while the selected option has auto set. |
| routedText | (modelName: string) => string | Answered by {name} | Builds the line that names the answering model. |
| effortOptions | SegmentOption<string>[] | none | Choices for the thinking time control. Omit to hide it. |
| effortValue | string | none | Selected effort. Omit for uncontrolled use. |
| defaultEffort | string | none | Initial effort when uncontrolled. Defaults to the first option. |
| onEffortChange | (value: string) => void | none | Called when the effort changes. |
| effortLabel | string | "Thinking time" | Visible label and group name for the effort control. |
| limit | ModelLimit | none | Puts the picker in the limit-reached state: reason, limitedIds and fallbackId. |
| fallbackText | (modelName: string) => string | Continuing on {name}. | Builds the line that names the fallback model. |
| align | "start" | "end" | "start" | Horizontal alignment of the panel. |
| side | "bottom" | "top" | "bottom" | Side of the trigger the panel opens on. |
| triggerExtra | ReactNode | none | Content placed after the model name on the chip. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ModelPicker switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- open
- Pressing the trigger opens a panel of model options; choosing one closes it.
- option disabled
- Set disabled on a model, or list its id in limit.limitedIds, to dim it and make it unselectable.
- limit notice
- Pass limit to show a note at the top of the panel saying why some models are unavailable and which one is used instead.
- routed
- When the chosen model has auto set and routedId is passed, the trigger shows via the routed model and the panel says who answered.
- keyboard
- Arrow keys, Home and End move between enabled models and select the one reached.
- focus
- The trigger and the model options show a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--surface-raised--border--fg-muted--shadow-lg--radius-control
Built in
- The options are a group of single choices named by the label, and screen readers hear which one is picked.
- Arrow keys move and pick, Home and End jump to the ends, and options that are off are skipped. Tab stops on one option only.
- The button says the label before the current choice and tells screen readers whether the list is open. On open, the cursor goes to the picked option, and Escape closes the list and returns to the button.
- Options that are off stay visible, with the reason written above the list.
- The list opens on the other side if it would run off the screen, and stays inside the screen edges.
What you need to do
- Write a label that names what is being chosen, such as Model or Mode. Screen readers use it for the button and the list.
- When a limit is reached, write the reason in plain words and say when it resets, if you know.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide