Checkbox Button Group

Checkbox Button Group

A styled checkable input group that communicates if an option(s) are true, false or indeterminate

Base

Preview

No content has been added for this component.

No content has been added for this component.

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox_button-group">
      <span class="slds-button slds-checkbox_button">
        <input type="checkbox" id="monday" name="checkbox" />
        <label class="slds-checkbox_button__label" for="monday">
          <span class="slds-checkbox_faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox_button">
        <input type="checkbox" id="tuesday" name="checkbox" />
        <label class="slds-checkbox_button__label" for="tuesday">
          <span class="slds-checkbox_faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox_button">
        <input type="checkbox" id="wednesday" name="checkbox" />
        <label class="slds-checkbox_button__label" for="wednesday">
          <span class="slds-checkbox_faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox_button">
        <input type="checkbox" id="thursday" name="checkbox" />
        <label class="slds-checkbox_button__label" for="thursday">
          <span class="slds-checkbox_faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox_button">
        <input type="checkbox" id="friday" name="checkbox" />
        <label class="slds-checkbox_button__label" for="friday">
          <span class="slds-checkbox_faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>

Overview of CSS Classes

Selector.slds-checkbox_button-group
Summary

Initializes checkbox button group

Restrictdiv, span
VariantTrue
Selector.slds-checkbox_button
Summary

Initializes checkbox inside a button group

Restrict.slds-checkbox_button-group span
Selector.slds-checkbox_button__label
Summary

Creates a custom styled checkbox

Restrict.slds-checkbox_button label
Selector.slds-checkbox_faux
Summary

Creates a custom styled checkbox

Restrict.slds-checkbox_button__label span