Checkboxes and radio buttons

Checkboxes

Checkboxes let the user toggle a single option for switching a feature on or off. Each checkbox has a label to the right with the name of the option. Related checkboxes can be grouped with a common label to the left. Read more about the placement of labels (common mistakes to avoid) and checkboxes in the UX Guidelines.

Use when:

  • The user has to set an option that is either true or false
  • Changing state may need some additional steps (OK, Save, or similar)

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .checkbox or <fieldset>.

.checkbox

Radio buttons

Radio buttons let the user choose one option out of two or more choices. Each radio button has a label to the right with the name of the option. Related radio buttons should be grouped with a common label unless the options are self-explanatory. Read more about the placement of labels (common mistakes to avoid) and radio buttons in the UX Guidelines.

Use when:

  • The user needs to choose one value out of a predefined set of options
  • The user benefits from getting guidance on what to choose
  • It is useful to see all options at the same time
  • The choices needs to be emphasized
.radio

Inline checkboxes and radios

.checkbox.checkbox-inline





.radio.radio-inline 

				
<!-- Default checkboxes (stacked) -->
<div class="checkbox">
  <input type="checkbox" id="checkbox-example-1"> 
  <label for="checkbox-example-1">Option one is this and that — be sure to include why it's great </label>
</div>

<div class="checkbox disabled">
  <input type="checkbox" disabled="disabled" id="checkbox-example-2"> 
  <label for="checkbox-example-2">Option two is disabled</label>
</div>

<!-- Default radio buttons (stacked) -->
<div class="radio">
  <input type="radio" id="radio-example-1"> 
  <label for="radio-example-1">Option one is this and that—be sure to include why it's great</label>
</div>

<div class="radio disabled">
  <input type="radio" disabled="disabled" checked="checked" id="radio-example-3"> 
  <label for="radio-example-3">Option three is disabled</label>
</div>

<!-- Inline checkboxes -->
<div class="checkbox checkbox-inline">
  ...
</div>

<!-- Inline radio buttons -->
<div class="radio radio-inline">
  ...
</div>