@ithaka/bonsai/documentation/pages/components/forms/option-sets.md

ITHAKA core styling

---
title: Checkboxes & Radio Buttons
description: Checkboxes are used when there are lists of options and the user may select zero, one, or several choices. Radio buttons are used for mutually exclusive options and the user must select exactly one choice.
sass: ./scss/_optionsets.scss
---


## How to Use
### Checkboxes
* A checkbox allows a user to select zero to many values from a small set of options.
* Use checkboxes when a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off.
* Use a checkbox when accepting terms and conditions.

``` html_example
 <fieldset>
    <legend>Checkboxes</legend>
    <input type="checkbox" id="checkbox"/>
    <label for="checkbox">Unchecked</label>
    <input type="checkbox" id="checkbox-checked" checked="checked"/>
    <label for="checkbox-checked">Checked</label>
    <input type="checkbox" id="checkbox-disabled-unchecked" disabled="disabled"/>
    <label for="checkbox-disabled-unchecked">Disabled (unchecked)</label>
    <input type="checkbox" id="checkbox-disabled-checked" disabled="disabled" checked="checked"/>
    <label for="checkbox-disabled-checked">Disabled (checked)</label>
    <input type="checkbox" id="checkbox-error" class="input-error"/>
    <label for="checkbox-error">Error</label>
    <input type="checkbox" id="checkbox-multiline"/>
    <label for="checkbox-multiline">Multi-line Checkbox<br/>With Multiple Lines<br/>So Many</label>
</fieldset>
```

<br />

### 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 options.

``` html_example
<fieldset>
    <legend>Radio Buttons</legend>
    <input type="radio" name="radios" id="radio"/>
    <label for="radio">Unselected</label>
    <input type="radio" name="radios" id="radio-selected" checked="checked"/>
    <label for="radio-selected">Selected</label>
    <input type="radio" name="radios" id="radio-disabled" disabled="disabled"/>
    <label for="radio-disabled">Disabled</label>
    <input type="radio" name="radios" id="radio-error" class="input-error"/>
    <label for="radio-error">Error</label>
    <input type="radio" name="radios" id="radio-multiline"/>
    <label for="radio-multiline">Multi-line Radio Button<br/>With Multiple Lines<br/>So Many</label>
</fieldset>
```

<br />



## Guidelines
1. Use checkboxes & radio buttons when users need to see all the available options at a glance.
1. Users should be able to interact with (tap or click on) the text label or the element to select or deselect an option.
1. List options vertically if possible; horizontal listings can make it difficult to tell which label pertains to which element.
1. Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, alienate users who don’t fit into your assumptions, or seem pushy. If you are unsure, leave nothing selected by default.

## Avoid
1. Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
1. Avoid using checkboxes and radio buttons if there are too many options to display on a mobile screen.
1. Consider a `<select>` element if you don’t have enough space to list out all available options.
1. Although if you have too many options for radio buttons, you probably have too many options for a select. At that point, you should probably reconsider why you're giving people so many choices at once. Maybe there's another way to architect the form

<br/>