Zetta v0.10

Components · Selection & control

Switch

A boolean form control for on/off state. The track is muted when off and brand-lime when on; 8px of padding expands the hit area toward 44px. Build it on a real checkbox for keyboard support.

Preview

Light
Dark
Accessibility

Spec

Values and token references straight from the Zetta spec.

switch
trackColor
{colors.surface-muted}
trackWidth
52px
trackHeight
28px
trackBorderRadius
{rounded.full}
thumbColor
{colors.canvas}
thumbSize
22px
thumbBorderRadius
{rounded.full}
thumbShadow
{shadows.sm}
thumbOffsetActive
26px
cursor
pointer
paddingX
8px
paddingY
8px
switch-focus
outline
2px solid {colors.border-focus}
outlineOffset
2px
switch-on
trackColor
{colors.brand}
switch-disabled
trackColor
{colors.disabled-bg}
thumbColor
{colors.canvas}
cursor
not-allowed
switch-on-disabled
trackColor
{colors.disabled-border}

Build with the skill

No package to install — hand this to your AI to generate the switch in your stack.

Prompt for your AI 
Implement the Zetta "Switch" component in this project's stack using the zetta-design-md skill.

- Apply the `switch` spec from the skill (variants: on, off, disabled).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

  • 52×28 track, 22px thumb with var(--shadow-sm). On = brand, off = surface-muted.
  • Focus shows a 2px ring at 2px offset on the track. Disabled uses the disabled tokens.
  • Always associate a label (wrap with <label> or use aria-label).

Known gaps

  • Loading / pending switch state is not yet specified.