Radio
When to use radio?
Radio (buttons) are for selecting one of a group of possible items, like alternatives or choices.
When selecting between two items (like on / off), consider using the Switch component instead.
Guidelines
When you add a new radio to the UI, it should pass each of the following guidelines. You must have a strong reason to break any of these.
- With radio the user should be able to select only one option, it can't be used for multi selection.
- Always create radio buttons in vertical form, this strengthens the connection between the items, doesn't hide options, and allows the user to see easily what is selected.
- Radio buttons should have a clear group label the describes what the selection is about.
- Each item should be clearly labelled with a few words in a single line of sentence style text. The users should never wonder what the choices mean.
- Position the choice labels to the right of the selectors.
- Keep number of items at a maximum of 8. Adding more items increases screen clutter, consider using a drop down instead.
- Order of the items should follow an intended logic, for example frequency of use or alphabetical sorting.
- Consider adding a default choice that would fit the most frequent use case. If there is a default option, it should be the first.
| Last update: | () |
| Message | doc(components): fix duplications in menu |
| Committer: | Tamás Bíró |
| Version history | |
Default
<div class="e-field">
<label class="e-field__label">
Clear group label
</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb1" id="chb1.1" checked class="e-radio">
<label for="chb1.1">
Radio label
</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb1" id="chb1.2" class="e-radio">
<label for="chb1.2">
Radio label
</label>
</li>
</ul>
</div>
<div class="e-field">
<label class="e-field__label">Clear group label</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb1" id="chb1.1" checked class="e-radio">
<label for="chb1.1">Radio label</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb1" id="chb1.2" class="e-radio">
<label for="chb1.2">Radio label</label>
</li>
</ul>
</div>Variations
Disabled
<div class="e-field">
<label class="e-field__label">
Clear group label
</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb2" id="chb2.1" checked disabled class="e-radio">
<label for="chb2.1">
Radio label
</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb2" id="chb2.2" disabled class="e-radio">
<label for="chb2.2">
Radio label
</label>
</li>
</ul>
</div>
<div class="e-field">
<label class="e-field__label">Clear group label</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb2" id="chb2.1" checked disabled class="e-radio">
<label for="chb2.1">Radio label</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb2" id="chb2.2" disabled class="e-radio">
<label for="chb2.2">Radio label</label>
</li>
</ul>
</div>Error
<div class="e-field">
<label class="e-field__label">
Clear group label
</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb3" id="chb3.1" checked class="e-radio e-input-error">
<label for="chb3.1">
Radio label
</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb3" id="chb3.2" class="e-radio">
<label for="chb3.2">
Radio label
</label>
</li>
</ul>
</div>
<div class="e-field">
<label class="e-field__label">Clear group label</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb3" id="chb3.1" checked class="e-radio e-input-error">
<label for="chb3.1">Radio label</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb3" id="chb3.2" class="e-radio">
<label for="chb3.2">Radio label</label>
</li>
</ul>
</div>Block
<div class="e-row">
<div class="e-col-3">
<div class="e-field">
<label class="e-field__label">
Clear group label
</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb4" id="chb4.1" checked class="e-radio e-radio-block">
<label for="chb4.1">
Block label Block label Block label Block label Block label Block label
</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb4" id="chb4.2" class="e-radio">
<label for="chb4.2">
Normal label Normal label Normal label Normal label Normal label Normal
</label>
</li>
</ul>
</div>
</div>
</div>
<div class="e-row">
<div class="e-col-3">
<div class="e-field">
<label class="e-field__label">Clear group label</label>
<ul class="e-list">
<li class="e-list__item">
<input type="radio" name="chb4" id="chb4.1" checked class="e-radio e-radio-block">
<label for="chb4.1">Block label Block label Block label Block label Block label Block label</label>
</li>
<li class="e-list__item">
<input type="radio" name="chb4" id="chb4.2" class="e-radio">
<label for="chb4.2">Normal label Normal label Normal label Normal label Normal label Normal</label>
</li>
</ul>
</div>
</div>
</div>