Overview
Radio buttons allow the user to select one option from a set while seeing all available options.
Radio buttons are typically part of a group, where only one radio button in a
group can be selected at one time. Use the same name attribute
to group multiple radio <input> elements.
Types
1) Default Radio Buttons
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="accept" />
Yes
</label>
<label class="radio">
<input type="radio" name="accept" />
No
</label>
</div>
</div>2) Stacked Radio Buttons
Inline radio buttons can sometimes be difficult to scan. Users may find it difficult to differentiate which label the option belongs to: the one before or after the option.
Note: Arranging the radio buttons in a vertical block (seen below) helps to eliminate possible confusion.
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="choice" />
Yes
</label>
</div>
<div class="control">
<label class="radio">
<input type="radio" name="choice" />
No
</label>
</div>
</div>When to use
Radio buttons should be used:
- When users can only select one item from a list of options.
Radio buttons should not be used:
- If you want users to select multiple options.
- Using the checkbox component would be more appropriate.
Can't find a component?
Let us know what you need and we’ll be happy to look into it