> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# Switch
Turns one setting on or off, and takes effect the moment it is flipped — reach for `Checkbox` when the answer is submitted with a form, and `ToggleButton` when the control belongs in a toolbar rather than a settings list. Because there is no Save to undo it, avoid a switch for anything destructive or slow.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Switch) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-switch--overview)
```tsx
import { Switch, SwitchControl, SwitchLabel } from '@wallarm-org/design-system/Switch';
export const Basic = () => (
Enable notifications
);
```
## Usage
```tsx
import { Switch, SwitchControl, SwitchLabel } from '@wallarm-org/design-system/Switch';
```
## Examples
### Checked
The on state. The track fills with brand and the thumb travels, so on and off differ by
both colour and position.
```tsx
import { Switch, SwitchControl, SwitchLabel } from '@wallarm-org/design-system/Switch';
export const Checked = () => (
Enable notifications
);
```
### Disabled
Dimmed and not clickable, in both states. A disabled switch still shows where the setting
stands, which is the point of showing it at all.
```tsx
import { VStack } from '@wallarm-org/design-system/Stack';
import { Switch, SwitchControl, SwitchLabel } from '@wallarm-org/design-system/Switch';
export const Disabled = () => (
Enable notifications
Enable notifications
);
```
### With description
`SwitchDescription` adds a second line and switches the row to a grid, so the text aligns
with the label rather than the track.
```tsx
import { Switch, SwitchControl, SwitchDescription, SwitchLabel } from '@wallarm-org/design-system/Switch';
export const WithDescription = () => (
Enable notifications
Receive notifications about updates and new features.
);
```
### Multiple
Several switches in a column. They are independent settings, not a choice between
options — if only one may be on, that is a `Radio` group.
```tsx
import { Info } from '@wallarm-org/design-system/icons';
import { VStack } from '@wallarm-org/design-system/Stack';
import { Switch, SwitchControl, SwitchDescription, SwitchLabel } from '@wallarm-org/design-system/Switch';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';
export const Multiple = () => (
Email notifications{' '}
Additional information
Receive email notifications about important updates.
Push notifications{' '}
Additional information
Get push notifications on your mobile device.
SMS notifications{' '}
Additional information
Receive SMS notifications for critical alerts.
);
```
### Accessibility mode
`a11yMode` draws a tick or a cross inside the track, so the state survives being read
without colour. Worth turning on wherever the setting matters more than the aesthetic.
```tsx
import { VStack } from '@wallarm-org/design-system/Stack';
import { Switch, SwitchControl, SwitchLabel } from '@wallarm-org/design-system/Switch';
export const AccessibilityMode = () => (
Enable notifications
Enable notifications
);
```
## Props
| Prop | Type | Default | Description |
| --------------- | -------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| a11yMode | `boolean \| undefined` | `false` | |
| title | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| onChange | `ChangeEventHandler \| undefined` | | |
| htmlFor | `string \| undefined` | | |
| label | `string \| undefined` | | Specifies the localized strings that identifies the accessibility elements and their states |
| disabled | `boolean \| undefined` | | Whether the switch is disabled. |
| name | `string \| undefined` | | The name of the input field in a switch (Useful for form submission). |
| value | `string \| number \| undefined` | | The value of switch input. Useful for form submission. |
| ids | `ElementIds \| undefined` | | The ids of the elements in the switch. Useful for composition. |
| readOnly | `boolean \| undefined` | | Whether the switch is read-only |
| required | `boolean \| undefined` | | If `true`, the switch input is marked as required, |
| onCheckedChange | `((details: CheckedChangeDetails) => void) \| undefined` | | Function to call when the switch is clicked. |
| invalid | `boolean \| undefined` | | If `true`, the switch is marked as invalid. |
| checked | `boolean \| undefined` | | The controlled checked state of the switch |
| asChild | `boolean \| undefined` | | Use the provided child element as the default rendered element, combining their props and behavior. |
| data-testid | `string \| undefined` | | |
### SwitchDescription
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| onChange | `ChangeEventHandler \| undefined` | | |
### SwitchLabel
| Prop | Type | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| title | `string \| undefined` | | |
| defaultChecked | `boolean \| undefined` | | |
| defaultValue | `string \| number \| readonly string[] \| undefined` | | |
| autoFocus | `boolean \| undefined` | | |
| id | `string \| undefined` | | |
| tabIndex | `number \| undefined` | | |
| rel | `string \| undefined` | | |
| onChange | `ChangeEventHandler \| undefined` | | |
| asChild | `boolean \| undefined` | | Use the provided child element as the default rendered element, combining their props and behavior. |
## Explorer