---
id: Switch
section: components
cssPrefix: pf-v5-c-switch
---## Examples

### Basic

```html
<label class="pf-v5-c-switch" for="switch-with-label-1">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-with-label-1"
    aria-labelledby="switch-with-label-1-on"
    checked
  />

  <span class="pf-v5-c-switch__toggle"></span>

  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-with-label-1-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-with-label-1-off"
    aria-hidden="true"
  >Message when off</span>
</label>

<br />
<br />
<label class="pf-v5-c-switch" for="switch-with-label-2">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-with-label-2"
    aria-labelledby="switch-with-label-2-on"
  />
  <span class="pf-v5-c-switch__toggle"></span>

  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-with-label-2-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-with-label-2-off"
    aria-hidden="true"
  >Message when off</span>
</label>

```

### Reverse (toggle on right)

```html
<label class="pf-v5-c-switch pf-m-reverse" for="switch-reverse-1">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-reverse-1"
    aria-labelledby="switch-reverse-1-on"
    checked
  />

  <span class="pf-v5-c-switch__toggle"></span>

  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-reverse-1-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-reverse-1-off"
    aria-hidden="true"
  >Message when off</span>
</label>

<br />
<br />
<label class="pf-v5-c-switch pf-m-reverse" for="switch-reverse-2">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-reverse-2"
    aria-labelledby="switch-reverse-2-on"
  />
  <span class="pf-v5-c-switch__toggle"></span>

  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-reverse-2-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-reverse-2-off"
    aria-hidden="true"
  >Message when off</span>
</label>

```

### Label and check

```html
<label class="pf-v5-c-switch" for="switch-label-check-1">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-label-check-1"
    aria-labelledby="switch-label-check-1-on"
    checked
  />

  <span class="pf-v5-c-switch__toggle">
    <span class="pf-v5-c-switch__toggle-icon">
      <i class="fas fa-check" aria-hidden="true"></i>
    </span>
  </span>
  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-label-check-1-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-label-check-1-off"
    aria-hidden="true"
  >Message when off</span>
</label>

<br />
<br />
<label class="pf-v5-c-switch" for="switch-label-check-2">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-label-check-2"
    aria-labelledby="switch-label-check-2-off"
  />

  <span class="pf-v5-c-switch__toggle">
    <span class="pf-v5-c-switch__toggle-icon">
      <i class="fas fa-check" aria-hidden="true"></i>
    </span>
  </span>
  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-label-check-2-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-label-check-2-off"
    aria-hidden="true"
  >Message when off</span>
</label>

```

### Without label

```html
<label class="pf-v5-c-switch" for="switch-with-icon-1">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-with-icon-1"
    aria-label="switch is off"
    checked
  />

  <span class="pf-v5-c-switch__toggle">
    <span class="pf-v5-c-switch__toggle-icon">
      <i class="fas fa-check" aria-hidden="true"></i>
    </span>
  </span>
</label>

<br />
<br />
<label class="pf-v5-c-switch" for="switch-with-icon-2">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-with-icon-2"
    aria-label="switch is off"
  />
  <span class="pf-v5-c-switch__toggle">
    <span class="pf-v5-c-switch__toggle-icon">
      <i class="fas fa-check" aria-hidden="true"></i>
    </span>
  </span>
</label>

```

### Disabled

```html
<label class="pf-v5-c-switch" for="switch-disabled-1">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-disabled-1"
    aria-labelledby="switch-disabled-1-on"
    disabled
    checked
  />

  <span class="pf-v5-c-switch__toggle"></span>

  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-disabled-1-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-disabled-1-off"
    aria-hidden="true"
  >Message when off</span>
</label>

<br />
<br />
<label class="pf-v5-c-switch" for="switch-disabled-2">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-disabled-2"
    aria-labelledby="switch-disabled-2-on"
    disabled
  />

  <span class="pf-v5-c-switch__toggle"></span>

  <span
    class="pf-v5-c-switch__label pf-m-on"
    id="switch-disabled-2-on"
    aria-hidden="true"
  >Message when on</span>

  <span
    class="pf-v5-c-switch__label pf-m-off"
    id="switch-disabled-2-off"
    aria-hidden="true"
  >Message when off</span>
</label>

<br />
<br />
<label class="pf-v5-c-switch" for="switch-with-icon-disabled-1">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-with-icon-disabled-1"
    aria-label="switch is off"
    disabled
    checked
  />

  <span class="pf-v5-c-switch__toggle">
    <span class="pf-v5-c-switch__toggle-icon">
      <i class="fas fa-check" aria-hidden="true"></i>
    </span>
  </span>
</label>

<br />
<br />
<label class="pf-v5-c-switch" for="switch-with-icon-disabled-2">
  <input
    class="pf-v5-c-switch__input"
    type="checkbox"
    id="switch-with-icon-disabled-2"
    aria-label="switch is off"
    disabled
  />
  <span class="pf-v5-c-switch__toggle">
    <span class="pf-v5-c-switch__toggle-icon">
      <i class="fas fa-check" aria-hidden="true"></i>
    </span>
  </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-labelledby="..."` or `aria-label="..."` | `.pf-v5-c-switch__input` | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-v5-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-v5-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
| `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its input id. **Required** |
| `id` | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required** |
| `id` | `.pf-v5-c-switch__label` | Each `.pf-v5-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-v5-c-switch__input`. |
| `checked` | `.pf-v5-c-switch__input` |  Indicates that the input is checked |
| `disabled` | `.pf-v5-c-switch__input` |  Indicates that the input is disabled |
| `aria-hidden="true"` | `.pf-v5-c-switch__label` | Hides the text from the screen reader. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v5-c-switch` | `<label>` |  Initiates a switch. **Required**  |
| `.pf-v5-c-switch__input` | `<input type="checkbox">` |  Hide the checkbox inside the switch. **Required**  |
| `.pf-v5-c-switch__toggle` | `<span>` |  Initiates the toggle inside the switch. **Required**  |
| `.pf-v5-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
| `.pf-v5-c-switch__label` | `<span>` |  Initiates a label inside the switch. |
| `.pf-m-on` | `.pf-v5-c-switch__label` | Modifies the switch label to display the on message. |
| `.pf-m-off` | `.pf-v5-c-switch__label` | Modifies the switch label to display the off message. |
| `.pf-m-reverse` | `.pf-v5-c-switch` | Positions the switch toggle to the right of the label. |
