Radio

Installation

npx @smicolon/fasla-ui add radio

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.

Usage

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)}
/>