Radio

A radio button allows users to select a single option. It is usually associated with form submissions.

Type Default State Disabled
Unchecked
Checked

Usage

Here is an example of radio buttons. Make sure to use the same value for the name attribute within a group of radio buttons.

HTML
<label class="radio">
    <input checked name="question-1" type="radio" class="radio-dot" value="Yes" />
    <span class="radio-label-text">Yes</span>
</label>
<label class="radio">
    <input name="question-1" type="radio" class="radio-dot" value="No" />
    <span class="radio-label-text">No</span>
</label>
<label class="radio">
    <input name="question-1" type="radio" class="radio-dot" value="Maybe" />
    <span class="radio-label-text">Maybe</span>
</label>

You can wrap the radio button group with a container and use flex classes to display a vertical alignment.

HTML
<div class="display-flex flex-direction-column">
    <label class="radio margin-bottom-xxs">
        <input name="question-3" type="radio" class="radio-dot" value="0%" />
        <span class="radio-label-text">0%</span>
    </label>
    <label class="radio margin-bottom-xxs">
        <input name="question-3" type="radio" class="radio-dot" value="50%" />
        <span class="radio-label-text">50%</span>
    </label>
    <label class="radio">
        <input name="question-3" type="radio" class="radio-dot" value="100%" />
        <span class="radio-label-text">100%</span>
    </label>
</div>

Figma