‹ components

RadioGroup

draftv0.9.0·open in canvas

Single-choice option list on Radix RadioGroup — all options visible.

Installnpx shadcn add @cids/radio-group
Live demo

Motion · tap to replay

honors reduced-motion

150ms on ring border-color; the dot appears without animation (selection is instant feedback, not a transition).

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { RadioGroup } from "@/design-system";

const [slippage, setSlippage] = useState<"0.1" | "0.5" | "1.0">();

<RadioGroup
  aria-label="Slippage tolerance"
  value={slippage}
  onValueChange={setSlippage}
  options={[
    { value: "0.1", label: "0.1%", description: "May fail on volatile pairs" },
    { value: "0.5", label: "0.5%", description: "Recommended" },
    { value: "1.0", label: "1.0%" },
  ]}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Unchecked**: outline ringempty.**Disabled** : 40% opacityno pointer.

Single-choice option list on Radix RadioGroup — all options visible.

Anatomy

◉  0.5%                    ← Item (16px ring, brand dot when
   Recommended             ← description (fg-muted, optional)
○  1.0%                    ← unchecked ring (outline)

Each row is a ≥40px-tall label — the whole row is the hit area.

Props

PropTypeDefaultNotes
optionsRadioOption<T>[]—{ value, label, description?, disabled? }.
valueT undefined`—Controlled.
onValueChange(value: T) => void—
disabledboolean—Disables the whole group.
aria-labelstring—Name the group when no visible label precedes it.
classNamestring—cn-merged onto the root.

Motion

150ms on ring border-color; the dot appears without animation (selection

is instant feedback, not a transition).

A11y

Radix wiring: role="radiogroup", roving tabindex — Tab enters the

group once, ↑/↓/←/→ move selection. Rows are real <label>s so

clicking text selects. Always name the group (aria-label or a

preceding heading); descriptions are part of the label's text content.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.