Skip to main content

Switch

Toggle switch with role=switch, aria-checked, and keyboard support.

Controlled on

Email notificationsGet updates when someone replies.

Controlled off

Push notifications

Low contrast track (variant)

Legacy panel chrome

Off state comparison

Default off trackTinted track and surface thumb — production default.
Low contrast off trackPre-fix panel styling for theme QA — not recommended for shipping UI.

Default checked

Auto-save draftsSaves every few seconds while you write.

Label only

Show archived entries

Disabled off

Unavailable settingCannot be changed on your plan.

Disabled on

Enterprise SSOManaged by your organization.

Animation variants

animationVariant — click each control to compare press feedback.

Default
None
Ripple
Scale
Sink
Lift
Pulse
Glow

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
modeOptional"light" | "dark"lightColor mode.
variantOptional"default" | "low-contrast"defaultOff-track styling — default uses tinted track + surface thumb; low-contrast restores legacy panel chrome (weak on pastel themes).
labelOptionalReactNodeSetting name shown beside the switch.
checked / onCheckedChangeOptionalboolean + callbackControlled toggle state.
disabledOptionalbooleanPrevents interaction.
animationVariantOptionalPressAnimationVariantdefaultPress animation — default, none, ripple, scale, sink, lift, pulse, or glow.