Selectors

Radio buttons and checkboxes allow users to select single or multiple items in a set.

There is often confusion around radio buttons and checkboxes. Use a radio button when your question has only one answer. Use a checkbox when your question has multiple answers.

Radio buttons

Like dropdowns, radio selectors allow the user to select an item from a set of options.

Which of these would bother you the most?

  • Use if there’s a single answer.
  • Only use radio selectors when there are fewer than 10 options and it’s helpful to see them all at once. Otherwise, use a dropdown.
  • Stack them vertically instead of horizontally. This keeps the options scannable.
  • Don’t use radio buttons to select multiple answers.
{% toggleText('radio') %}
<form>
    <div class="custom-radio">
        <input name="radio" type="radio" id="radio1">
        <label for="radio1" class="custom radio">Being hungry</label>
    </div>
    <div class="custom-radio">
        <input name="radio" type="radio" id="radio2">
        <label for="radio2" class="custom radio">Being cold and wet</label>
    </div>
    <div class="custom-radio">
        <input name="radio" type="radio" id="radio3">
        <label for="radio3" class="custom radio">Not feeling safe</label>
    </div>
    <div class="custom-radio">
        <input name="radio" type="radio" id="radio4">
        <label for="radio4" class="custom radio">Being stranded</label>
    </div>
    <div class="custom-radio">
        <input name="radio" type="radio" id="radio5" disabled>
        <label for="radio5" class="custom radio">Not having a personal belongings</label>
    </div>
</form>

Checkboxes

Checkboxes allow a user to select none, one, or more than one selection.

Fast, good, or cheap. You can select all three here.

  • Use checkboxes when more than one item can be selected.
  • As with radio selectors, stack checkbox items vertically.
  • Don’t use checkboxes if only one selection is desired.
{% toggleText('checkboxes') %}
<form>
    <div class="custom-checkbox">
        <input name="checkbox" type="checkbox" id="checkbox1">
        <label for="checkbox1" class="custom checkbox"> Fast
            <img class="icon iconic" data-direction="bottom" data-src="opattern-icons/svg/smart/check.svg" />
        </label>
    </div>
    <div class="custom-checkbox">
        <input name="checkbox" type="checkbox" id="checkbox2">
        <label for="checkbox2" class="custom checkbox"> Good
            <img class="icon iconic" data-direction="bottom" data-src="opattern-icons/svg/smart/check.svg" />
        </label>
    </div>
    <div class="custom-checkbox">
        <input name="checkbox" type="checkbox" id="checkbox3">
        <label for="checkbox3" class="custom checkbox"> Cheap
            <img class="icon iconic" data-direction="bottom" data-src="opattern-icons/svg/smart/check.svg" />
        </label>
    </div>
    <div class="custom-checkbox">
        <input name="checkbox" type="checkbox" id="checkbox5" disabled>
        <label for="checkbox5" class="custom checkbox"> Your lucky day
            <img class="icon iconic" data-direction="bottom" data-src="opattern-icons/svg/smart/check.svg" />
        </label>
    </div>
</form>