Switch | Lime design system

Examples

Notifications

Tell me when a payment arrives

Card controls

Freeze card Online payments

When to use it

Use: A setting that applies at once: notifications, round-ups, instant transfers.
Use: A list of preferences, one switch per row with its label on the left.
Not for: The choice waits for a Save or Continue. Use Checkbox.
Not for: One of several named options. Use Radio.
Not for: One of two to five views. Use Segmented.
Not for: The control starts an action. Use Button.

8 rules

Must: Use a Checkbox, not a Switch, when the setting needs a Save button. Because a switch says the change already took effect, so people leave before pressing Save.
Must: Wrap the label and the switch in one label element, label first and switch at the end. Because a span beside the switch is not its name, and tapping the word does nothing.
Must: Set the switch back and say why in text when the save fails. Because a switch left on after a failed save says round-ups are running when they are not.
Should: Name the setting, not the action, so the label is true in both positions.
Never: Put On or Off text in the track; the position and fill say it. Because Switch renders only its knob and drops children, so the text never shows.
Must: Pass aria-label when there is no visible text. Because a screen reader announces "switch, off" with nothing saying what it turns off.
Should: Make the whole row the target, at least 44px high; the track is 24px.
Never: Resize or recolor the switch; it is always 40 by 24px. Because the knob travels a fixed 16px, so a wider track leaves it short of the end.

4 checks

: The switch is role switch with aria-checked, named by its wrapping label or aria-label.
: Tab focuses it; Space or Enter flips it.
: The knob is white with a soft shadow and a hairline edge in both states; on and off differ by the side the knob sits on and the track color, never by color alone.
: Forced colors paints the thumb ButtonText and an on track Highlight.

7 edge cases

Long label: The label wraps in its own column; the switch is shrink-0.
Narrow row: The switch never shrinks; the label wraps beside it.
Right to left: The thumb travel turns around under dir="rtl".
Slow save: No pending state; the switch flips at once and the page handles the wait.
Disabled and on: The thumb stays at the end, so it still reads as on.
Inside a form: The state submits through a hidden input under its name.
Reduced motion: The thumb jumps at once.

3 props

13 tokens