#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 · Storybook

#Usage

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.

#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.

#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.

#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.

#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.

#Props

#SwitchDescription

#SwitchLabel

#Explorer