About Checkbox Toggle#

The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

Accessibility#

Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question.

Custom checkboxes are created by applying the .slds-checkbox class to a <label> element. To remain accessible to all user agents, place <input> with type="checkbox" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-checkbox_faux class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with .slds-form-element__label contains the label text.

When a single checkbox is required, <div class="slds-checkbox"> should get <abbr class="required" title="required">*</abbr> added to the DOM, directly before the <input type="checkbox" /> for visual indication that the checkbox is required.

When a checkbox group is required, the <fieldset> should receive the class .slds-is-required. The <legend> should then get <abbr class="required" title="required">*</abbr> added to the DOM for visual indication that the checkbox group is required.

As SLDS checkboxes rely on the :checked pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.

The following JavaScript demonstrates how to set a checkbox to be indeterminate:

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, checkbox toggles will have an increased label text size.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Base#

<div class="slds-form-element">
  <label class="slds-checkbox_toggle slds-grid">
    <span class="slds-form-element__label slds-m-bottom_none">Toggle Label</span>
    <input type="checkbox" name="checkbox-toggle-4" value="checkbox-toggle-4" aria-describedby="checkbox-toggle-4" />

States#

Checked#

<div class="slds-form-element">
  <label class="slds-checkbox_toggle slds-grid">
    <span class="slds-form-element__label slds-m-bottom_none">Toggle Label</span>
    <input type="checkbox" name="checkbox-toggle-7" value="checkbox-toggle-7" aria-describedby="checkbox-toggle-7" checked="" />

Disabled#

<div class="slds-form-element">
  <label class="slds-checkbox_toggle slds-grid">
    <span class="slds-form-element__label slds-m-bottom_none">Toggle Label</span>
    <input type="checkbox" name="checkbox-toggle-10" value="checkbox-toggle-10" disabled="" aria-describedby="checkbox-toggle-10" />

Right to Left#

<div dir="rtl">
  <div class="slds-form-element">
    <label class="slds-checkbox_toggle slds-grid">
      <span class="slds-form-element__label slds-m-bottom_none">Toggle Label</span>

Styling Hooks Overview#