PF Next

Switch

Preview



<label class="pf-c-switch" for="switch-on-example">
  <input class="pf-c-switch__input" type="checkbox" id="switch-on-example" aria-label="..." checked>
  <span class="pf-c-switch__toggle">
  </span>
  <span class="pf-c-switch__label" aria-hidden="true">
      label
  </span>
</label>
<br/>
<br/>
<label class="pf-c-switch" for="switch-off-example">
  <input class="pf-c-switch__input" type="checkbox" id="switch-off-example" aria-label="...">
  <span class="pf-c-switch__toggle">
  </span>
  <span class="pf-c-switch__label" aria-hidden="true">
      label
  </span>
</label>

Switch No Label

Preview

<label class="pf-c-switch" for="switch-on-no-label-example">
  <input class="pf-c-switch__input" type="checkbox" id="switch-on-no-label-example" aria-label="..." checked>
  <span class="pf-c-switch__toggle">
  </span>
</label>
<label class="pf-c-switch" for="switch-off-no-label-example">
  <input class="pf-c-switch__input" type="checkbox" id="switch-off-no-label-example" aria-label="...">
  <span class="pf-c-switch__toggle">
  </span>
</label>

Switch Disabled

Preview



<label class="pf-c-switch" for="switch-on-disabled-example">
  <input class="pf-c-switch__input" type="checkbox" id="switch-on-disabled-example" aria-label="..." disabled checked>
  <span class="pf-c-switch__toggle">
  </span>
  <span class="pf-c-switch__label" aria-hidden="true">
      label
  </span>
</label>
<br/>
<br/>
<label class="pf-c-switch" for="switch-off-disabled-example">
  <input class="pf-c-switch__input" type="checkbox" id="switch-off-disabled-example" aria-label="..." disabled>
  <span class="pf-c-switch__toggle">
  </span>
  <span class="pf-c-switch__label" aria-hidden="true">
      label
  </span>
</label>

Documentation

Overview

A Switch is an alternative to the checkbox component.

Use a switch when your user needs to perform instantaneous actions without confirmation.

Use checkbox if your user has to perform additional steps for changes to become effective.

Accessibility

Attribute Applied To Outcome
aria-label="..." .pf-c-switch__input Indicates the action triggered by the switch. required
checked .pf-c-switch__input Indicates that the input is checked
disabled .pf-c-switch__input Indicates that the input is disabled

Usage

Class Applied To Outcome
.pf-c-switch <label> Initiates a switch. required
.pf-c-switch__input <input type="checkbox"> Hide the checkbox inside the switch. required
.pf-c-switch__toggle <span> Initiates the toggle inside the switch. required
.pf-c-switch__label <span> Initiates a label inside the switch.