Components · Forms & selection
Checkbox
A 20px box with a 2px border and 4px radius — the one component that uses the small radius. Checked fills with brand and a brand-text check. Build it on a real checkbox for keyboard support.
Preview
Light
Dark
Accessibility
Spec
Values and token references straight from the Zetta spec.
checkbox
- backgroundColor
- transparent
- borderColor
- {colors.border-strong}
- borderWidth
- 2px
- borderRadius
- {rounded.sm}
- size
- 20px
- cursor
- pointer
- padding
- 12px
checkbox-hover
- borderColor
- {colors.border-focus}
checkbox-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
checkbox-checked
- backgroundColor
- {colors.brand}
- borderColor
- {colors.brand}
- iconColor
- {colors.brand-text}
- iconSize
- 12px
checkbox-indeterminate
- backgroundColor
- {colors.brand}
- borderColor
- {colors.brand}
- iconColor
- {colors.brand-text}
checkbox-disabled
- backgroundColor
- {colors.disabled-bg}
- borderColor
- {colors.disabled-border}
- cursor
- not-allowed
Build with the skill
No package to install — hand this to your AI to generate the checkbox in your stack.
Implement the Zetta "Checkbox" component in this project's stack using the zetta-design-md skill.
- Apply the `checkbox` spec from the skill (variants: unchecked, checked, indeterminate, 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
- 620px box, 2px border,
rounded.sm(4px) — the only component with the small radius. - Hover borders focus-lime; checked fills brand; focus shows a 2px ring; 12px padding expands the hit area toward 44px.
- Wrap with
<label>for an accessible name.
Known gaps
- Indeterminate state and the related Radio control are specified but not yet previewed here.