Switch

v1.0.0

A tactile toggle control with spring-animated thumb motion, aria-switch semantics, contextual labeling support, and multiple visual variants.

A simple switch with label and description. The thumb animates with spring physics on toggle.

Enable notifications

Receive real-time alerts via push.

Dark mode

Switch to a darker color scheme.

Use <code>checked</code> and <code>onCheckedChange</code> to manage the toggle state from parent state.

Real-time sync

Push updates to connected clients immediately.

State: disabled

A frosted glass style with backdrop blur and translucent backgrounds for modern UI overlays.

Glass mode

Frosted glass aesthetic with backdrop blur.

A flat, minimal style matching Notion's design with neutral backgrounds and a blue accent when active.

Notion style

Flat design matching Notion's UI language.

Set <code>disabled</code> to prevent interaction. The switch appears faded and the thumb cannot move.

Beta features

This setting requires admin access.

Two-factor authentication

Enforced by organization policy.

Use multiple switches together to create a settings panel with independent toggles.

Notification Preferences

Email alerts

Receive email for account activity.

Push notifications

Browser and mobile push alerts.

SMS alerts

Text message for critical updates.

Weekly digest

Summary of the week's activity.

Privacy

Profile visibility

Make your profile public.

Activity status

Show when you are online.

API Reference

Properties accepted by the toggle switch control primitive.

Property	Type	Default	Description
variant	'default' \| 'glass' \| 'notion'	'default'	Controls the visual style of the switch track background.
checked	boolean	undefined	Controlled checked state of the switch toggle.
defaultChecked	boolean	false	Uncontrolled initial checked state on first render.
onCheckedChange	(checked: boolean) => void	undefined	Callback triggered when the toggle state changes.
label	React.ReactNode	undefined	Primary label rendered beside the switch control. Clickable.
description	React.ReactNode	undefined	Secondary helper text rendered below the label.
disabled	boolean	false	Disables interaction and applies reduced opacity styling.