Components / Radio Group

Radio Group

<RadioGroup />Stable

Pick one option from a visible set. For 4 items or fewer, prefer this over a Select. Built on Radix RadioGroup.

import { RadioGroup, RadioGroupItem } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

State

Layout

Item label

<RadioGroup defaultValue="marcus">
  {options.map((o) => (
    <div key={o.v} className="flex items-center gap-2">
      <RadioGroupItem value={o.v} id={o.v} />
      <Label htmlFor={o.v}>{o.label}</Label>
    </div>
  ))}
</RadioGroup>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { RadioGroup } from "@/components/upnext";


<RadioGroup />

States

<RadioGroup defaultValue="marcus">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="marcus" id="marcus" />
    <Label htmlFor="marcus">Marcus Reed</Label>
  </div>
  …
</RadioGroup>

Composition

Email digest

Sundays at 7am with that week's prospects.

Slack DM

Real-time pings the moment a recruit responds.

Nothing

Coach Patel checks the dashboard manually.

import { RadioGroup, RadioGroupItem, TextBlockHeading, TextBlockBody } from "@/components/upnext";


{/* heading + body via TextBlock — no hardcoded sizes */}
<RadioGroup defaultValue="email">
  <div className="flex items-start gap-2.5">
    <RadioGroupItem value="email" id="email" aria-labelledby="email-h" className="mt-0.5" />
    <div className="grid gap-0.5">
      <TextBlockHeading id="email-h">Email digest</TextBlockHeading>
      <TextBlockBody>Sundays at 7am with that week's prospects.</TextBlockBody>
    </div>
  </div>
  …
</RadioGroup>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.