@patternfly/react-core
Version:
This library provides a set of common React components for use with the PatternFly reference implementation.
50 lines (28 loc) • 894 B
Markdown
---
id: Switch
section: components
cssPrefix: pf-v6-c-switch
propComponents: ['Switch']
ouia: true
---
import { Fragment, useState } from 'react';
To keep inline with accessibility guidelines, the label for a switch must never dynamically change. A dynamically changing label (such as one label for an "on" state and another label for an "off" state) can be confusing as the contexts for each label changes as the switch state does. This applies to both visible text labels as well as labels provided via `aria-label`.
### Basic
```ts file="./SwitchBasic.tsx"
```
```ts file="./SwitchReversed.tsx"
```
```ts file="./SwitchWithoutLabel.tsx"
```
```ts file="./SwitchCheckedWithLabel.tsx"
```
```ts file="./SwitchDisabled.tsx"
```
```ts file="./SwitchUncontrolled.tsx"
```