Radio Buttons

Styled radio buttons.

Label

Note:
Radio buttons are similar to checkboxes, but with an important distinction — same-named radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple same-named controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

Grouped Radio Buttons

A select list that can have a single entry checked at any one time.

<div class="c-label">
    <span class="c-label__text">Label</span>
    <label class="c-label c-label--radio" for="radio_1">
        <input class="c-input c-input--radio" id="radio_1" type="radio" name="radio_grp">
        <span class="c-label__text">Radio 1</span>
    </label>
    <label class="c-label c-label--radio" for="radio_2">
        <input class="c-input c-input--radio" id="radio_2" type="radio" name="radio_grp">
        <span class="c-label__text">Radio 2</span>
    </label>
    <label class="c-label c-label--radio" for="radio_3">
        <input class="c-input c-input--radio" id="radio_3" type="radio" name="radio_grp">
        <span class="c-label__text">Radio 3</span>
    </label>
</div>

<div class="c-label | u-flex u-flex-column">
    <span class="c-label__text">Label</span>
    <label class="c-label c-label--radio" for="radio_3_1">
        <input class="c-input c-input--radio" id="radio_3_1" type="radio" name="radio_grp">
        <span class="c-label__text">Radio 1</span>
    </label>
    <label class="c-label c-label--radio | u-px-0" for="radio_3_2">
        <input class="c-input c-input--radio" id="radio_3_2" type="radio" name="radio_grp">
        <span class="c-label__text">Radio 2</span>
    </label>
    <label class="c-label c-label--radio | u-px-0" for="radio_3_3">
        <input class="c-input c-input--radio" id="radio_3_3" type="radio" name="radio_grp">
        <span class="c-label__text">Radio 3</span>
    </label>
</div>

<div class="c-label">
    <span class="c-label__text">Label</span>
    <label class="c-label c-label--radio" for="radio_2_1">
        <input class="c-input c-input--radio" id="radio_2_1" type="radio" name="radio_grp_2">
        <span class="c-label__text">Radio 1</span>
    </label>
    <label class="c-label c-label--radio" for="radio_2_2">
        <input class="c-input c-input--radio" id="radio_2_2" type="radio" name="radio_grp_2">
        <span class="c-label__text">Radio 2</span>
    </label>
    <label class="c-label c-label--radio" for="radio_2_3">
        <input class="c-input c-input--radio" id="radio_2_3" type="radio" name="radio_grp_2" disabled>
        <span class="c-label__text">Radio 3</span>
    </label>
</div>

Radio Buttons

A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.

Radio Buttons

Grouped Radio Buttons

Useful notes and reading:

Related Links: