Radio buttons allow users to see all available options and select only one from a predetermined list.


Component Code
<div class="field">
    <div class="control">
        <label class="radio">
            <input type="radio" name="question" />
            Yes
        </label>
        <label class="radio">
            <input type="radio" name="question" />
            No
        </label>
    </div>
</div>

When you should use this component

You should use the radio button component when users can only select one item from a list of options.

When you should consider something else

Do not use the raido button component if users can select more than one option. If you require users to select multiple options, then using the checkbox component would be more appropriate.


Stacked Radio Buttons

Component Code
<div class="field">
        <div class="control">
            <label class="radio is-block margin--bottom--sm">
                <input type="radio" name="question" />
                Yes
            </label>
            <label class="radio is-block margin--bottom--sm">
                <input type="radio" name="question" />
                No
            </label>
        </div>
    </div>

When you should use this component

Inline radio buttons can sometimes be difficult to scan, as users may find it difficult to differentiate which label the checkbox option belongs to: the one before or after the option. By arranging the radio buttons in a vertical block as above, this helps to eliminate any confusion the user may have.


Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team