Foundations
Choice Controls
Switch, borderless Checkbox with a mixed state, and a RadioGroup with arrow-key navigation.
2 variantsMIT
Preview
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/choice-controls.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { Checkbox, Radio, RadioGroup, Switch } from "@/components/ui/choice-controls";
<Switch label="Web search" checked={web} onCheckedChange={setWeb} />
<Checkbox label="Remember this choice" checked={remember} onCheckedChange={setRemember} />
<RadioGroup label="Reasoning effort" value={effort} onValueChange={setEffort}>
<Radio value="low" label="Low" />
<Radio value="high" label="High" description="Thinks longer on hard tasks" />
</RadioGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / defaultChecked | boolean (Checkbox: | "mixed") | — | Controlled or uncontrolled state. |
| onCheckedChange | (checked: boolean) => void | — | Called on toggle. |
| label | ReactNode | — | Visible label; clicking it toggles. Without it, pass aria-label. |
| description | ReactNode | — | Secondary line under the label. |
| RadioGroup.value / defaultValue | string | — | Selected radio. |
| RadioGroup.onValueChange | (value: string) => void | — | Called when a radio is picked by click or arrow keys. |
| RadioGroup.label* | string | — | Accessible name of the group. |