A radio button allows users to select a single option. It is usually associated with form submissions.
| Type | Default State | Disabled |
|---|---|---|
| Unchecked | ||
| Checked |
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>