Switch

When to use

Switch is for a setting that applies the moment it changes: turning on notifications, dark mode, enabling a feature.

When not to use

• For a choice applied when the form is submitted: Use a Checkbox.
• For more than two options: Use a RadioGroup or a Select.
• For a toolbar button: Use a Toggle.

Anatomy

Option labelOption description goes here.

LightDark

Copy code

import { Switch } from '@bigbang/ui';

export default function WithDescription() {
  return <Switch label="Option label" description="Option description goes here." defaultChecked />;
}

1. Track: 32 × 18 px (switch-width-md, switch-height-md), fully round; size="sm" gives 24 × 14 px for dense rows. The off track stays a strong grey so it keeps 3:1 against the page.
2. Thumb: 16 px (switch-thumb-md, 12 px in sm), flat; slides to the end edge when on.
3. Label: body-md; part of the click area with the track.
4. Description: optional; aligned with the label text.

Behaviour

• Click and Space toggle the switch; onCheckedChange is called at once.
• While loading, the switch keeps focus, reports aria-busy and ignores changes.
• In right-to-left text the thumb slides the other way.
• A hidden <input> is submitted with the form; name goes to it.

Guidelines

• Write the label as the name of the setting: “Notifications”. Do not add “On” or “Off”; the track shows the state.
• Show loading when saving can take over a second; on failure, revert the state and say why.
• Do not use a switch for choices tied to a form’s submit button.

Content

• The label is a short noun phrase; it has no full stop.
• The description says what the setting does.

Turkish	English
Yükleniyor	Loading
Kaydediliyor	Saving

Related components

• Checkbox: a choice applied when the form is submitted.
• Toggle: a toolbar button that stays pressed.
• Spinner: a loading indicator.