Radio group

One choice of several. Each radio is the same small slanted well as a checkbox; the chosen one holds a slab of the accent, nested inside it like the Tabs slab in its track.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/radio-group

Examples

One shift of three

DawnDayNightClosed for repairs

radio-group-basic.tsx

import { RadioGroup, RadioGroupItem } from "@/components/zero/radio-group";const shifts = [  { value: "dawn", label: "Dawn" },  { value: "day", label: "Day" },  { value: "night", label: "Night" },];export default function RadioGroupBasic() {  return (    <RadioGroup defaultValue="night" aria-label="Shift">      {shifts.map((shift) => (        <label key={shift.value} className="flex items-center gap-2.5">          <RadioGroupItem value={shift.value} />          {shift.label}        </label>      ))}      <label className="flex items-center gap-2.5 text-zero-text-3">        <RadioGroupItem value="closed" disabled />        Closed for repairs      </label>    </RadioGroup>  );}

Behaviour

A checkbox fills, a radio holds a slab, so the two never read alike. The slab springs in on the release timing.

Arrow keys move the choice within the group. Wrap each radio in a <label> with its text.

Props

RadioGroup

Prop	Type	Default	Description
value	string	—	The chosen value, controlled; with onValueChange.
defaultValue	string	—	The chosen value, uncontrolled.

Also takes every prop of Base UI's RadioGroup.

RadioGroupItem

Prop	Type	Default	Description
value	string	—	The value this radio stands for.

Also takes every prop of Base UI's Radio.Root.