Component

Switch

Toggle control for binary on/off states. Supports two sizes, disabled and invalid states.

Switchsize: default · sm

checkeddata-checked · data-unchecked

disableddata-disabled · opacity-50

aria-invalidborder-destructive · ring

Playground

Size— size

Checked— checked

Disabled— disabled

Invalid (aria-invalid)— invalid

Sizes

default

default off

sm off

With label

Enable notifications

Marketing emails

Product updates

Settings list

Notifications

Receive alerts and reminders

Dark mode

Switch to a darker interface

Wi-Fi

Connect to wireless networks

Two-factor auth

Add an extra layer of security

Notification channels

Choose how you want to receive notifications.

Daily digest

Push

Instant alerts

In-app

Inside the dashboard

With Field — description & orientation

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Choice card — Field wrapped in FieldLabel

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode is enabled or disabled.

RTL support

المشاركة عبر الأجهزة

يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.

Tokens used

7 semantic tokens consumed by this component.

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary

--primary-foregroundPrimary Foreground

text-primary-foregroundbg-primary-foreground

--inputInput

bg-inputborder-input

--backgroundBackground

bg-background

--foregroundForeground

text-foreground

--ringRing

ring-ringring

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive