Radio Group

You might be looking for:

• Switch

  A single on or off setting.

• Checkbox

  Check one or more options independently.

Playground

<RadioGroup defaultValue="comfortable" className="w-fit"> <div className="flex items-center gap-2"> <RadioGroupItem value="default" id="default" /> <Label htmlFor="default">Default</Label> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="comfortable" id="comfortable" /> <Label htmlFor="comfortable">Comfortable</Label> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="compact" id="compact" /> <Label htmlFor="compact">Compact</Label> </div></RadioGroup>

Usage

import { RadioGroup, RadioGroupItem } from "@sophic/portal-ui/components/ui/radio-group";

<RadioGroup value={value} onValueChange={setValue}>
  <RadioGroupItem value="one" id="one" />
  <RadioGroupItem value="two" id="two" />
</RadioGroup>

In app forms, RadioGroup is a controlled input wired through react-hook-form's Controller inside the Field family; the demo here is standalone.

Props

RadioGroup and RadioGroupItem have no props of their own — they accept every Radix RadioGroup.Root prop (value, defaultValue, onValueChange, disabled, ...) and RadioGroup.Item prop (value, disabled, ...) respectively.

Tokens

Radio Group reads --radio-* for size, border, fill, and the center dot. Fallbacks keep apps without those tokens on the previous look.

Changelog

• 4 October 2026 — Unchecked ring is neutral-500 in both modes (was 400 on light). Full notes
• 3 October 2026 — Dark checked fill is Soil on a lifted card; the brand-green control stays light-only. Full notes
• 3 October 2026 — Same --control-size and inset ring as Checkbox; Field rows align to the label line. Full notes
• 19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
• 19 August 2026 — “You might be looking for” map to Switch and Checkbox. Full notes
• 22 July 2026 — Unchecked hover darkens the border (matches checkbox). Full notes
• 15 July 2026 — Brand-green selected fill; 20px circles via --radio-*. Full notes