Radio

A control for choosing exactly one option from a set.

Installation

bash
npx @smicolon/cli add radio

Run init once per project before adding components. See Installation.

Preview

Variants

The layout variant wraps the control and its text in a bordered card, so the whole card becomes the target. Use it when the options carry a description; use the default when they are single words in a tight list.

Sizes

States

Hover and focus are real CSS states rather than props — hover an option, or tab to it, to see them. Selection is carried by the dot alone; the card chrome does not change.

Accessibility

  • Renders a native <input type="radio">, so arrow-key navigation and form submission work without extra code.
  • Options sharing a name form one group, and only one can be selected.
  • description is linked with aria-describedby; the control graphic is hidden from assistive technology.
  • Without a label or description, pass an aria-label.
  • Direction is inherited from dir, never a prop, so the control can never disagree with the page.

Props

PropTypeDefaultDescription
variant"default" | "layout""default"A plain control or a bordered card.
size"sm" | "md" | "lg""md"Control size.
checkedboolean—Selected state, with onChange.
disabledbooleanfalseDisables the option and dims it.
labelstring—Label text.
descriptionstring—Secondary line below the label.
namestring—Groups radios into one set.
valuestring—Value submitted with the form.
onChange(event) => void—Called when the option is picked.
classNamestring—Extra classes for the component.

Usage

tsx
import { Radio } from "@/components/ui/radio"

// A group — options share a name
<Radio name="plan" value="standard" label="Standard" />
<Radio name="plan" value="express" label="Express" />

// With a description
<Radio
  name="plan"
  value="courier"
  label="Same-day courier"
  description="Arrives before 6pm"
/>

// Bordered card layout
<Radio variant="layout" name="plan" value="express" label="Express" />

// Controlled
<Radio
  name="plan"
  value="express"
  label="Express"
  checked={plan === "express"}
  onChange={(e) => setPlan(e.target.value)}
/>

Selected: standard