Radio

A labelled, form-associated radio for single-select choices. For the bare circle without a label, use the sc-radio-item primitive.

Install

Examples

States

Resting, checked, negative, and disabled.

Unchecked Checked Invalid Disabled

Group

Radios with a shared name are mutually exclusive — selecting one clears the others.

Free Pro Enterprise

Radio item primitive (sc-radio-item)

The standalone circle and dot only — no label or form association. Use it in custom layouts where you own the surrounding markup.

Guidelines

Usage

mutually-exclusive options that need a label and form binding. Share a name across radios to group them. For multi-select, use Checkbox.

Do

  • Use a radio group when exactly one option must be chosen.
  • Give every radio in a set the same name.
  • Default to the safest or most common option when one makes sense.

Don’t

  • Don’t use radios for multi-select — use Checkbox.
  • Don’t use a single radio on its own; a checkbox or toggle fits better.
  • Don’t ship the bare sc-radio-item without your own label and grouping.

Accessibility

Properties

Related