@patternfly/patternfly

--- 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 /> Message when on Message when off </label> <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" /> Message when on Message when off </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 /> Message when on Message when off </label> <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" /> Message when on Message when off </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 /> Message when on Message when off </label> <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" /> Message when on Message when off </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 /> </label> <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" /> </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 /> Message when on Message when off </label> <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 /> Message when on Message when off </label> <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 /> </label> <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 /> </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` | `` | Initiates the toggle inside the switch. **Required** | | `.pf-v5-c-switch__toggle-icon` | `` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** | | `.pf-v5-c-switch__label` | `` | 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. |