States
Toggle uses role="switch" and aria-checked. The thumb slides on a smooth 0.2s transition. Click or press Space/Enter to toggle.
Off · md
On · md
Off · sm
On · sm
With label
Pass a label prop to get an inline label rendered as a wrapping <label> element — clicking the text toggles the control.
With description — Toggle Full
Pass both label and description to get the full-width layout: label and description on the left, toggle on the right. Use in settings panels.
Email notificationsReceive updates about your account activity and product announcements.
Analytics cookiesHelp us improve Cedar by sharing anonymous usage data. Opt out at any time.
Two-factor authenticationRequires a verification code in addition to your password. Strongly recommended.
Sizes
sm32 × 18px14pxCompact settings rows, dense lists.md40 × 22px18pxDefault. Settings pages, preference panels.Keyboard & accessibility
Space / EnterToggle the switch.TabMove focus to/from the switch.role="switch"Signals a binary on/off control to screen readers.aria-checked"true" when on, "false" when off. Screen readers announce state on change.Label elementWhen label prop is set, the wrapping <label> means clicking the label text also toggles.Usage guidance
DoUse Toggle for settings that take effect immediately — no Save button needed.DoUse the Full variant in settings panels where context is important.DoDescribe the on state in the label: "Email notifications" not "Notifications toggle".Don'tUse Toggle for form choices that require submission — use Checkbox instead.Don'tUse Toggle for multi-select scenarios — use Checkboxes.Don'tStack more than 6–8 toggles without grouping them into sections with labels.Tokens used
action/primaryTrack — on stateborder/subtleTrack — off state (#CCCCCC)bg/disabledTrack — disabled state (both on and off)foundations/whiteThumb filltext/baseLabel texttext/subtleDescription text (Full variant)text/disabledLabel and description when disabledradius/fullTrack and thumb shape (pill / circle)space/3Gap between control and inline label (12px)space/4Gap between text and toggle (Full variant, 16px)