Radio Group

A set of checkable buttons where only one can be selected.

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsxEditable — live

function Demo() {
  const [value, setValue] = useState("comfortable")
  return (
    <RadioGroup value={value} onValueChange={setValue}>
      {["comfortable", "compact", "spacious"].map((v) => (
        <label key={v} className="flex cursor-pointer items-center gap-3 text-sm capitalize text-fg">
          <RadioGroupItem value={v} />
          {v}
        </label>
      ))}
    </RadioGroup>
  )
}
render(<Demo />)

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/radio-group

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Import RadioGroup from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.