Radio

A single choice from a set of options.

Default

Use a plain Radio when the parent lays out the label and control.

Aria

Kai

Maya

import { Label, Radio, RadioGroup } from "@smallest-inc/ui";

export default function RadioDefault() {
  return (
    <RadioGroup aria-label="Voice" defaultValue="aria" className="w-auto">
      <div className="flex items-center gap-2">
        <Radio value="aria" id="voice-aria" />
        <Label htmlFor="voice-aria">Aria</Label>
      </div>
      <div className="flex items-center gap-2">
        <Radio value="kai" id="voice-kai" />
        <Label htmlFor="voice-kai">Kai</Label>
      </div>
      <div className="flex items-center gap-2">
        <Radio value="maya" id="voice-maya" />
        <Label htmlFor="voice-maya">Maya</Label>
      </div>
    </RadioGroup>
  );
}

Cards

RadioCard is for detailed choices that need a full surface. The whole card is selectable.

WarmFriendly and reassuring.ClearMeasured and direct.

Rows

RadioRow is for compact, comparable options in a vertical stack.

StandardBalanced quality and speed.FastPrioritize a quicker response.PrecisePrioritize a more considered response.

import { RadioGroup, RadioRow } from "@smallest-inc/ui";

export default function RadioRows() {
  return (
    <RadioGroup aria-label="Response speed" defaultValue="standard" className="max-w-sm">
      <RadioRow value="standard" title="Standard" description="Balanced quality and speed." />
      <RadioRow value="fast" title="Fast" description="Prioritize a quicker response." />
      <RadioRow value="precise" title="Precise" description="Prioritize a more considered response." />
    </RadioGroup>
  );
}

Brand

Set variant to brand on RadioGroup to fill the selected radio with brand blue instead of foreground.

WarmFriendly and reassuring.ClearMeasured and direct.

import { RadioCard, RadioGroup } from "@smallest-inc/ui";

export default function RadioBrand() {
  return (
    <RadioGroup aria-label="Tone" variant="brand" defaultValue="warm" className="max-w-md sm:grid-cols-2">
      <RadioCard value="warm" title="Warm" description="Friendly and reassuring." />
      <RadioCard value="clear" title="Clear" description="Measured and direct." />
    </RadioGroup>
  );
}

Disabled

Disable a single option with disabled on the item, or the whole group on RadioGroup.

StarterUp to 1,000 minutes a month.GrowthUp to 10,000 minutes a month.EnterpriseContact sales to enable.

import { RadioGroup, RadioRow } from "@smallest-inc/ui";

export default function RadioDisabled() {
  return (
    <RadioGroup aria-label="Plan" defaultValue="starter" className="max-w-sm">
      <RadioRow value="starter" title="Starter" description="Up to 1,000 minutes a month." />
      <RadioRow value="growth" title="Growth" description="Up to 10,000 minutes a month." />
      <RadioRow value="enterprise" title="Enterprise" description="Contact sales to enable." disabled />
    </RadioGroup>
  );
}

Best practices

When to use

Use for one choice from two to six mutually exclusive options where seeing every option matters.
Use Select or Combobox for longer lists, Switch for a boolean setting, and RadioCard or RadioRow when options need a description.

Behavior

Preselect a safe default with defaultValue unless the decision has real consequences.
RadioCard and RadioRow make the whole surface selectable. Use cards for a few detailed choices side by side, and rows for comparable options in a stack.
Set variant="brand" on RadioGroup when the selected radio should fill with brand blue instead of foreground.
Disable an unavailable option with disabled on the item and say why in its description, such as “Contact sales to enable.”

Accessibility

Name the group with a Fieldset legend or an aria-label on RadioGroup, and keep arrow-key navigation within the group.

PreviousProportional Slider NextRipple Media