Reasoning effort
How hard the model thinks: a segmented Low, Medium, High control with a spring-driven indicator, or a compact Think toggle.
On this page
Segmented Low, Medium, High with a sliding indicator.
Installation
Usage
import { ReasoningEffort, ThinkToggle } from "@/components/ui/chatcn/reasoning-effort"
<ReasoningEffort value={effort} onValueChange={setEffort} />
<ThinkToggle pressed={think} onPressedChange={setThink} />Examples
Think toggle
The compact single toggle.
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | string | Default medium |
options | { value, label, description? }[] | Default Low, Medium, High. Descriptions are read after the label |
size | "sm" | "md" | 28 or 32 px |
icon | boolean | Reasoning glyph before the segments |
label | string | Group name. Default Reasoning effort |
disabled | boolean | For models without reasoning |
ThinkToggle | Base UI Toggle props | pressed, onPressedChange, label |
Keyboard
| Key | Action |
|---|---|
Tab | One stop for the whole group, on the selected option |
| Arrow keys | Move and select. Flipped in RTL |
Home, End | First or last option |
Motion
- The indicator moves by transform on spring-snappy: critically damped, 300 ms, sampled into CSS
linear(). No overshoot, no physics engine. - Moved with the arrow keys, it snaps: keyboard-driven UI never animates.
- Under reduced motion it always snaps.