Selection Controls

Selection controls allow the user to make a selection from a set of options using checkboxes, radios, or switches. Checkboxes allow the user to select multiple options, while radios and switches only allow one option to be selected.

Checkboxes

States [checked] [disabled]
<div class="input-checkbox-wrap">
<input type="checkbox" id="checkbox-transactional" value="Transactional" checked>
<label class="input-checkbox-label" for="checkbox-transactional">Transactional</label>
</div>
<div class="input-checkbox-wrap">
<input type="checkbox" id="checkbox-marketing" value="Marketing" disabled>
<label class="input-checkbox-label" for="checkbox-marketing">Marketing</label>
</div>
view raw checkbox.html hosted with ❤ by GitHub

Guidelines

  • Labels should be sentence case and ≤ 20 characters.
  • Use only when multiple selections are permitted.
Don't use in cases where users should make single selections.
Don't use excessively long labels..

Radios

States [checked] [disabled]
<div class="input-radio-wrap">
<input type="radio" name="ab-test-winner" id="radio-open-rate" value="Open Rate" checked>
<label class="input-radio-label" for="radio-open-rate">Open Rate</label>
</div>
<div class="input-radio-wrap">
<input type="radio" name="ab-test-winner" id="radio-click-rate" value="Click Rate" disabled>
<label class="input-radio-label" for="radio-click-rate">Click Rate</label>
</div>
view raw radio.html hosted with ❤ by GitHub

Guidelines

  • Labels should be sentence case and ≤ 20 characters.
  • Use only when single selections are permitted.
Don't use in cases where users can make multiple selections.
Don't use excessively long labels.

Switches

Containers .switch .switch-label
Required .switch-option
States .switch-option-off .switch-option-on .is-disabled
HTML Elements .switch-checkbox .switch-selector
<div class="switch">
<input class="switch-checkbox" id="example-switch-1" type="checkbox">
<div class="switch-selector"></div>
<label class="switch-label" for="example-switch-1">
<div class="switch-option switch-option-off">Off</div>
<div class="switch-option switch-option-on">On</div>
</label>
</div>
<div class="switch">
<input class="switch-checkbox" id="example-switch-2" type="checkbox" checked="checked">
<div class="switch-selector"></div>
<label class="switch-label" for="example-switch-2">
<div class="switch-option switch-option-off">Off</div>
<div class="switch-option switch-option-on">On</div>
</label>
</div>
<div class="switch is-switch-disabled">
<input class="switch-checkbox" id="example-switch-3" type="checkbox" checked="checked" disabled="disabled">
<div class="switch-selector"></div>
<label class="switch-label" for="example-switch-3">
<div class="switch-option switch-option-off">Off</div>
<div class="switch-option switch-option-on">On</div>
</label>
</div>
view raw switches.html hosted with ❤ by GitHub

Guidelines

  • The labels must only be "OFF" and "ON" in caps.
  • Use switches like checkboxes.
  • For swapping between different views of data—e.g. percentage vs. count—use a toggle button.
Don't use non-standard labels.
Don't use a switch for a toggle.

Selectable Rows

I have an icon.
Another option for this button group.
I have no icon
Container(s) .btn-group-stacked
Required .btn-group-item .btn-selectable .btn-content
Modifiers .has-icon
States .is-active
<div class="btn-group-stacked">
<div class="btn btn-group-item btn-selectable btn-with-icon is-active">
<div class="input-radio-wrap">
<input id="option-1" type="radio" name="button-group-example" checked>
<label for="option-1" class="input-radio-label">Option 1</label>
</div>
<i class="sg-icon sg-icon-pie-chart"></i>
<div class="btn-content">I have an icon.</div>
</div>
<div class="btn btn-group-item btn-selectable btn-with-icon">
<div class="input-radio-wrap">
<input id="option-2" type="radio" name="button-group-example">
<label for="option-2" class="input-radio-label">Option 2</label>
</div>
<i class="sg-icon sg-icon-segment"></i>
<div class="btn-content">Another option for this button group.</div>
</div>
<div class="btn btn-group-item btn-selectable">
<div class="input-radio-wrap">
<input id="option-3" type="radio" name="button-group-example">
<label for="option-3" class="input-radio-label">Option 3</label>
</div>
<div class="btn-content">I have no icon</div>
</div>
</div>