Components · Forms & selection
Radio
A single-choice control — a 20px circle with a 2px border that fills with a brand dot when selected. Built on a real radio input for free grouping and keyboard support.
Preview
Light
Dark
Accessibility
Spec
Values and token references straight from the Zetta spec.
radio
- backgroundColor
- transparent
- borderColor
- {colors.border-strong}
- borderWidth
- 2px
- borderRadius
- {rounded.full}
- size
- 20px
- cursor
- pointer
- padding
- 12px
radio-hover
- borderColor
- {colors.border-strong}
radio-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
radio-checked
- borderColor
- {colors.brand}
- indicatorColor
- {colors.brand}
- indicatorSize
- 10px
radio-disabled
- borderColor
- {colors.disabled-border}
- cursor
- not-allowed
radio-checked-disabled
- borderColor
- {colors.disabled-border}
- indicatorColor
- {colors.disabled-text}
Build with the skill
No package to install — hand this to your AI to generate the radio in your stack.
Implement the Zetta "Radio" component in this project's stack using the zetta-design-md skill.
- Apply the `radio` spec from the skill (variants: unchecked, checked, 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
- 20px circle, 2px border, full radius; checked shows a 10px
branddot and a brand border. 12px padding expands the hit area toward 44px. - Group options by sharing the input
name; focus shows a 2px ring.
Accessibility
- Wrap a group in
<fieldset>with a<legend>, and give every option a<label>.