Primitives
Checkbox · Radio · Switch
Three selection controls. 16px box, 16px radio dot, 30×18 switch with lifting thumb. Focus halos at 18% accent.
installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json
Preview
Checkboxes
Radio group
Switches
import { Checkbox, Radio, Switch } from "@/components/br/primitives";
<Checkbox label="I have read the terms" checked={agreed} onChange={setAgreed} />
<Radio name="plan" value="pro" label="Pro — €24/mo" checked={plan === "pro"} onChange={setPlan} />
<Switch label="Subscribe to journal" checked={notif} onChange={setNotif} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Text to the right of the control. |
| checked / defaultChecked | boolean | — | Controlled / uncontrolled state. |
| onChange | (value: boolean) => void | — | Checkbox/Switch onChange callback (value, not event). |
| value (Radio) | string | — | The value emitted to onChange when selected. |