Radiobutton
Examples
Radio Button
<div class="ys-radio-button">
<input type="radio" name="radio-group" id="id-of-element-0"
class="ys-radio-button__control ys-u-visuallyhidden" />
<label for="id-of-element-0" class="ys-radio-button__label">Radio label</label>
</div>
Radio Button on dark background
<div class="ys-radio-button ys-radio-button--light">
<input type="radio" name="radio-group" id="id-of-element-1"
class="ys-radio-button__control ys-u-visuallyhidden" />
<label for="id-of-element-1" class="ys-radio-button__label">Radio label</label>
</div>
Disabled radio-button
<div class="ys-radio-button">
<input type="radio" name="radio-group" disabled id="id-of-element-2"
class="ys-radio-button__control ys-u-visuallyhidden" />
<label for="id-of-element-2" class="ys-radio-button__label">Radio label</label>
</div>
Disabled radio-button on dark background
<div class="ys-radio-button ys-radio-button--light">
<input type="radio" name="radio-group" disabled id="id-of-element-3"
class="ys-radio-button__control ys-u-visuallyhidden" />
<label for="id-of-element-3" class="ys-radio-button__label">Radio label</label>
</div>
HTML Guidelines
UX and Design Guidelines
Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list. (source: Checkboxes vs. Radio Buttons)
Radio Buttons must never be distributed horizontally at it makes it harder to:
- scan the options
- distinguish which radiobox a label is associated with