Zetta v1.6

Components · Forms & selection

Label

Form field label, required indicator, and info icon. Split from zetta-form-v1_4.md (removed in v1.5) in v1.4.

Preview

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Label" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `label` spec and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `label` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Email address  *  ?
↑ label text   ↑  ↑ label-info-icon (triggers tooltip)
               label-required
State Text color Notes
Default {colors.ink} —
Disabled {colors.disabled-text} Matches paired control disabled state

Do

  • Always pair a label with every form control.
  • Use sentence case: "Email address", "Date of birth".
  • Keep labels concise — noun or short noun phrase.
  • Show required indicator on required fields; accompany with a form-level note: "* Required fields."

Don't

  • Don't use placeholder text as a substitute for a label.
  • Don't include a trailing colon in label text.
  • Don't truncate label text — wrap instead.
  • Noun or short noun phrase. Sentence case. No trailing colon.
  • "Email address" ✓ — "Enter your email address:" ✗
  • Required indicator (): always pair with a form-level legend: " Required fields."
  • Info icon tooltip: one sentence explaining why the field is needed or what format to use.

Keyboard

Key Behavior
Tab Focus moves through labels' associated info icon buttons
Enter / Space Activates info icon (opens tooltip)

Accessibility

  • Label must be programmatically associated with its control via <label for="control-id"> or aria-labelledby.
  • Required indicator * is decorative — aria-required="true" on the control carries the semantic.
  • Info icon must be a focusable <button> with aria-label="More information about [field name]".
  • Contrast: {colors.ink} on {colors.canvas} is 18.92:1 (AAA).

Spec

Values and token references resolved straight from the Zetta spec.

label
textColor
{colors.ink}
fontFamily
Geist
fontSize
13px
fontWeight
500
lineHeight
1.4
label-disabled
textColor
{colors.disabled-text}
label-required
content
*
textColor
{colors.danger}
fontFamily
Geist
fontSize
13px
fontWeight
500
lineHeight
1.4
marginLeft
2px
label-info-icon
iconSize
14px
iconColor
{colors.muted}
marginLeft
4px
cursor
pointer