Components
Radio Group
macOS 26 radio buttons — a circle that flips from a gray ring to a solid accent fill with a white center dot, on Radix RadioGroup.
The macOS 26 radio button, aligned onto the Radix RadioGroup primitive: a small circle that flips from a translucent gray ring (unselected) to a solid accent fill with a white center dot (selected). Geometry (circle diameter, dot size) is lifted from the Apple macOS 26 UI Kit Toggles page; colors flip light/dark via the Acrylic theme tokens. Fully accessible and keyboard-operable (arrow keys move selection) with a shadcn-compatible API.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/radio-group.jsonUsage
"use client"import { RadioGroup, RadioGroupItem } from "@/registry/acrylic/radio-group"import { FieldLabel } from "@/registry/acrylic/field"// A small option list with labels. Each row pairs a RadioGroupItem with a// clickable label (htmlFor -> id), the macOS-standard choice-row layout.export default function RadioGroupDemo() { return ( <RadioGroup defaultValue="comfortable" className="text-foreground"> <div className="flex items-center gap-2"> <RadioGroupItem value="compact" id="r-compact" /> <FieldLabel htmlFor="r-compact">Compact</FieldLabel> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="comfortable" id="r-comfortable" /> <FieldLabel htmlFor="r-comfortable">Comfortable</FieldLabel> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="spacious" id="r-spacious" /> <FieldLabel htmlFor="r-spacious">Spacious</FieldLabel> </div> </RadioGroup> )}import { RadioGroup, RadioGroupItem } from "@/components/acrylic/radio-group"
<RadioGroup defaultValue="comfortable">
<div className="flex items-center gap-2">
<RadioGroupItem value="compact" id="r1" />
<label htmlFor="r1">Compact</label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="comfortable" id="r2" />
<label htmlFor="r2">Comfortable</label>
</div>
</RadioGroup>Examples
A vertical group, an inline (horizontal) group, and a disabled group.
Vertical
Inline
Disabled
"use client"import { RadioGroup, RadioGroupItem } from "@/registry/acrylic/radio-group"import { FieldLabel } from "@/registry/acrylic/field"// Vertical group, an inline/horizontal group, and a disabled group.export default function RadioGroupShowcase() { return ( <div className="flex flex-wrap items-start gap-10 text-foreground"> <div className="flex flex-col gap-2"> <span className="text-xs text-muted-foreground">Vertical</span> <RadioGroup defaultValue="card"> <div className="flex items-center gap-2"> <RadioGroupItem value="card" id="v-card" /> <FieldLabel htmlFor="v-card">Credit card</FieldLabel> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="paypal" id="v-paypal" /> <FieldLabel htmlFor="v-paypal">PayPal</FieldLabel> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="transfer" id="v-transfer" /> <FieldLabel htmlFor="v-transfer">Bank transfer</FieldLabel> </div> </RadioGroup> </div> <div className="flex flex-col gap-2"> <span className="text-xs text-muted-foreground">Inline</span> <RadioGroup defaultValue="md" className="flex flex-row flex-wrap gap-x-5 gap-y-2" > <div className="flex items-center gap-2"> <RadioGroupItem value="sm" id="i-sm" /> <FieldLabel htmlFor="i-sm">Small</FieldLabel> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="md" id="i-md" /> <FieldLabel htmlFor="i-md">Medium</FieldLabel> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="lg" id="i-lg" /> <FieldLabel htmlFor="i-lg">Large</FieldLabel> </div> </RadioGroup> </div> <div className="flex flex-col gap-2"> <span className="text-xs text-muted-foreground">Disabled</span> <RadioGroup defaultValue="on" disabled> <div className="flex items-center gap-2"> <RadioGroupItem value="on" id="d-on" /> <FieldLabel htmlFor="d-on">Selected</FieldLabel> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="off" id="d-off" /> <FieldLabel htmlFor="d-off">Unselected</FieldLabel> </div> </RadioGroup> </div> </div> )}Notes
- Circle: unselected is the kit's translucent gray ring/fill (black 5% light
/ white 5% dark), wired to
--acr-chipso it flips light/dark for free. Selected is the kit's opaque accent#0088FF(dark#0091FF), which maps exactly ontobg-primary. - Center dot: a white dot ~30% of the circle diameter, shown only when
selected (the kit's
Dotoval —4 / 4.8 / 4.8 / 5 / 5px for the five sizes). - Diameters (verbatim from the kit):
12 / 14 / 16 / 18 / 18px formini / small / medium / large / xl.medium(16px) is the default. - States: focus shows an accent ring (
ring-ring/25); disabled dims to 40%, echoing the kit's accent-50% + reduced-opacity disabled treatment. - Layout:
RadioGrouplays items out in a vertical grid by default; passclassName="flex flex-row …"for an inline group. - Props:
RadioGrouptakesvalue,defaultValue,onValueChange,disabled,name,required,orientation.RadioGroupItemtakesvalue(required),id,disabled, andsize(mini·small·medium(default) ·large·xl).
<RadioGroupItem value="lg" id="r-lg" size="large" />
<RadioGroup value={plan} onValueChange={setPlan}>…</RadioGroup>