Skip to main content

Radio

Radios allow users to select one and only one option from a set of options.

Example

Gender
Two radio buttons on a default theme

Best practices

Use radio to present users with two or more mutually exclusive options. Use in cases where the user is best-served by seeing all available options side-by-side.

Do

  • Only one radio within a group of radios may be selected at a time.
  • Include at least 2, but no more than 7 radios in a set.
  • Limit the radio label to a single line.

Don’t

  • Don’t use in scenarios where more than one option can be selected. Use checkboxes instead.
  • Don’t use two radios for a single binary choice. Ex. In a terms of service agreement, don’t use two radios labeled "I agree" and "I don’t agree". Instead, use a single checkbox labeled "I agree". The unchecked state automatically implies "I don’t agree".
  • Don’t use radios for more than 7 choices, use a combo or select component instead.
  • Don’t use radios when the options are numbers that have fixed steps, like 10, 20, 30. Use a slider component instead.
  • Don’t put two radio groups next to each other. When two radio groups are right next to each other, it’s difficult to determine which radios belong to which group. Use group labels to separate them.

Also known as

Radio button

Related

Checkbox
Toggle

Accessibility

  • Groups of input elements should always be wrapped in a fieldset element, and labeled appropriately with a legend.

Options

  • Layout Horizontally: Wrap more than one radio with a f-inline class on its parent element.
  • Layout Vertically: The default layout.

Development

  • Schema definition: The radio schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default radio buttons

Default radio example
<fieldset class="c-radio">
    <legend class="c-label">Default radio example</legend>
    <div>
        <div>
            <label class="c-label">
                <input id="default1" type="radio" aria-label="Default (checked)" name="default" value="default1" checked="checked">
                <span>Default (checked)</span>
            </label>
            <label class="c-label">
                <input id="default2" type="radio" aria-label="Default (unchecked)" name="default" value="default2">
                <span>Default (unchecked)</span>
            </label>
        </div>
    </div>
</fieldset>

Default radio buttons with optional description

Default radio example with descriptions

Brief description of radio

Brief description of radio

<fieldset class="c-radio">
    <legend class="c-label">Default radio example with descriptions</legend>
    <div>
        <div>
            <label class="c-label">
                <input id="description1" type="radio" aria-label="Default (checked)" name="description" value="description1" checked="checked">
                <span>Default (checked)</span>
            </label>
            <p class="c-caption">Brief description of radio</p>
            <label class="c-label">
                <input id="description2" type="radio" aria-label="Default (unchecked)" name="description" value="description2">
                <span>Default (unchecked)</span>
            </label>
            <p class="c-caption">Brief description of radio</p>
        </div>
    </div>
</fieldset>

Disabled radio buttons

Disabled radio example
<fieldset class="c-radio">
    <legend class="c-label">Disabled radio example</legend>
    <div>
        <div>
            <label class="c-label">
                <input id="disabled2" type="radio" aria-label="Disabled (checked)" name="disabled" value="disabled2" checked="checked" disabled="disabled">
                <span>Disabled (checked)</span>
            </label>
            <label class="c-label">
                <input id="disabled1" type="radio" aria-label="Disabled (unchecked)" name="disabled" value="disabled1" disabled="disabled">
                <span>Disabled (unchecked)</span>
            </label>
        </div>
    </div>
</fieldset>

Inline radio buttons

Inline radio example
<fieldset class="c-radio f-inline">
    <legend class="c-label">Inline radio example</legend>
    <div>
        <div>
            <label class="c-label">
                <input id="inline1" type="radio" aria-label="Inline (checked)" name="inline" value="inline1" checked="checked">
                <span>Inline (checked)</span>
            </label>
            <label class="c-label">
                <input id="inline2" type="radio" aria-label="Inline (unchecked)" name="inline" value="inline2">
                <span>Inline (unchecked)</span>
            </label>
            <label class="c-label">
                <input id="inline3" type="radio" aria-label="Inline (unchecked)" name="inline" value="inline3">
                <span>Inline (unchecked)</span>
            </label>
        </div>
    </div>
</fieldset>