Skip to main content
Sections

Radio

Svelte Figma

Checkable inputs that visually allow for single selection from multiple options.

Base

Section titled Base

Use the .s-radio to wrap input[type="radio"] elements to apply radio styles.

<div class="s-radio">
    <input type="radio" name="example-name" id="example-item" />
    <label class="s-label" for="example-item">Check Label</label>
</div>
Example Description
Unchecked radio.
Disabled unchecked radio.
Checked radio.
Disabled checked radio.

Checkmark

Section titled Checkmark

The checkmark style is an alternative to the base radio style. To use the checkmark style, wrap your input and label in a container with the .s-radio__checkmark class.

<label class="s-radio s-radio__checkmark" for="example-item">
    Checkmark Label
    <input type="radio" name="example-name" id="example-item" />
</label>
Example Class Description
.s-radio__checkmark Unchecked checkmark with a radio element.
.s-radio__checkmark Disabled unchecked checkmark with a radio element.
.s-radio__checkmark Checked checkmark with a radio element.
.s-radio__checkmark Disabled checked checkmark with a radio element.

Accessibility

Section titled Accessibility

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to radios, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Be sure to associate the radio label by using the for attribute. The value here is the input's id.
  • If you have a group of related radios, use the fieldset and legend to group them together.

For more information, please read Gov.UK's article, "Using the fieldset and legend elements".

Radio group

Section titled Radio group

Vertical group

Section titled Vertical group
<fieldset class="s-form-group">
    <legend class="s-label">…</legend>
    <div class="s-radio">
        <input type="radio" name="vert-radio" id="vert-radio-1" />
        <label class="s-label" for="vert-radio-1">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="vert-radio" id="vert-radio-2" />
        <label class="s-label" for="vert-radio-2">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="vert-radio" id="vert-radio-3" />
        <label class="s-label" for="vert-radio-3">…</label>
    </div>
</fieldset>

<!-- Checkmark w/ radio using .s-menu for additional styling -->
<fieldset class="s-menu s-form-group">
    <legend class="s-menu--title">…</legend>
    <div class="s-menu--item">
        <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-1">
            <input type="radio" name="vert-checkmark" id="vert-checkmark-1" />
            …
        </label>
    </div>
    <div class="s-menu--item">
        <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-2">
            <input type="radio" name="vert-checkmark" id="vert-checkmark-2" />
            …
        </label>
    </div>
    <div class="s-menu--item">
        <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-3">
            <input type="radio" name="vert-checkmark" id="vert-checkmark-3" />
            …
        </label>
    </div>
</fieldset>
Which types of fruit do you like?
Pick a fruit

Horizontal group

Section titled Horizontal group
<fieldset class="s-form-group s-form-group__horizontal">
    <legend class="s-label">…</legend>
    <div class="s-radio">
        <input type="radio" name="hori-radio" id="hori-radio-1" />
        <label class="s-label" for="hori-radio-1">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="hori-radio" id="hori-radio-2" />
        <label class="s-label" for="hori-radio-2">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="hori-radio" id="hori-radio-3" />
        <label class="s-label" for="hori-radio-3">…</label>
    </div>
</fieldset>
Which types of fruit do you like?

With description copy

Section titled With description copy
<fieldset class="s-form-group">
    <legend class="s-label">…</legend>
    <div class="s-radio">
        <input type="radio" name="desc-radio" id="desc-radio-1" />
        <label class="s-label" for="desc-radio-1">
            …
            <p class="s-description">…</p>
        </label>
    </div>
    …
</fieldset>

<!-- Checkmark w/ radio using .s-menu for additional styling -->
<fieldset class="s-menu s-form-group">
    <legend class="s-menu--title">…</legend>
    <div class="s-menu--item">
        <label class="s-menu--action s-radio s-radio__checkmark" for="desc-checkmark-1">
            <input type="radio" name="desc-checkmark" id="desc-checkmark-1" />
            <div>
                …
                <p class="s-description">…</p>
            </div>
        </label>
    </div>
    …
</fieldset>
Which types of fruit do you like?
Pick a fruit

Validation states

Section titled Validation states

Radios use the same validation states as inputs.

Validation classes

Section titled Validation classes
Class Description
.has-warning Used to warn users that the value they’ve entered has a potential problem, but it doesn’t block them from proceeding.
.has-error Used to alert users that the value they’ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.
.has-success Used to notify users that the value they’ve entered is fine or has been submitted successfully.

Validation examples

Section titled Validation examples
<!-- Radio w/ error -->
<div class="s-radio has-error">
    <input type="radio" name="error-radio" id="error-radio-1" />
    <label class="s-label" for="error-radio-1">
        …
        <p class="s-description">…</p>
    </label>
</div>

<!-- Checkmark w/ success -->
<label class="s-radio s-radio__checkmark has-success" for="success-checkmark-1">
    <input type="radio" name="success-checkmark" id="success-checkmark-1" />
    <div>
        …
        <p class="s-description">…</p>
    </div>
</label>
Which types of fruit do you like?
Pick a fruit
Edit on GitHub File an issue on GitHub
Deploys by Netlify