caliper uidocs
DemoSign inGet Pro

Radio

Free

A native radio for choosing exactly one option from a short group.

Installs components/ui/radio.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/radio.json
Billing period

When to use #

Use it for

  • Two to five mutually exclusive options that should all be visible.
  • Settings saved with a form.

Skip it when

  • Options need a description; use radio cards.
  • The choice switches a view; use a segmented control.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/radio.json

Adds the file to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Label } from "@/components/ui/label"
import { Radio } from "@/components/ui/radio"

export function DigestFrequency() {
  return (
    <fieldset className="grid gap-1">
      <legend className="text-sm font-semibold">Billing period</legend>
      <Label htmlFor="docs-daily" className="flex min-h-11 items-center gap-3">
        <Radio id="docs-daily" name="frequency" value="monthly" />
        Monthly · $84 / mo
      </Label>
      <Label htmlFor="docs-weekly" className="flex min-h-11 items-center gap-3">
        <Radio id="docs-weekly" name="frequency" value="quarterly" />
        Quarterly · $246 / qtr
      </Label>
      <Label htmlFor="docs-never" className="flex min-h-11 items-center gap-3">
        <Radio id="docs-never" name="frequency" value="annual" defaultChecked />
        Annually · $907 / yr
      </Label>
    </fieldset>
  );
}

API reference #

Radio

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It is built on native elements and keeps aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.