Components · Forms & selection
Input
The text input and its field wrapper — label, optional required mark, and helper or error text. Hover lifts a subtle shadow; focus rings; the invalid state turns the border danger.
Preview
Light
We'll never share your email.
That workspace name is taken.
Dark
We'll never share your email.
That workspace name is taken.
Accessibility
We'll never share your email.
That workspace name is taken.
Spec
The input's resolved Zetta spec (states). The field wrapper — label, field-helper, field-error — lives alongside it in the form spec.
input
- backgroundColor
- {colors.surface-card}
- textColor
- {colors.ink}
- placeholderColor
- {colors.placeholder}
- placeholderStyle
- italic
- borderColor
- {colors.border-strong}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 400
- lineHeight
- 1.6
- height
- 32px
- paddingX
- 14px
- paddingY
- 10px
input-hover
- borderColor
- {colors.border-strong}
- boxShadow
- {shadows.sm}
input-focus
- borderColor
- {colors.border-focus}
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
input-invalid
- borderColor
- {colors.danger}
input-invalid-focus
- borderColor
- {colors.danger}
- outline
- 2px solid {colors.danger}
- outlineOffset
- 2px
input-disabled
- backgroundColor
- {colors.disabled-bg}
- textColor
- {colors.disabled-text}
- borderColor
- {colors.disabled-border}
- cursor
- not-allowed
input-otp-container
- display
- flex
- flexDirection
- row
- gap
- 8px
- justifyContent
- center
- alignItems
- center
input-otp-slot
- backgroundColor
- {colors.surface-card}
- textColor
- {colors.ink}
- borderColor
- {colors.border-strong}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- fontFamily
- Geist Mono
- fontSize
- 16px
- fontWeight
- 500
- width
- 32px
- height
- 32px
- textAlign
- center
input-otp-slot-focus
- borderColor
- {colors.border-focus}
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
input-otp-separator
- color
- {colors.hairline}
- width
- 8px
- height
- 2px
Build with the skill
No package to install — hand this to your AI to generate the input + field in your stack.
Implement the Zetta "Input" component in this project's stack using the zetta-design-md skill.
- Apply the `input` spec from the skill (variants: default, hover, focus, invalid, 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 & states
- 32px tall, 14px padding, 8px radius,
border-strongborder. Placeholder is italicplaceholdercolor. - Hover:
var(--shadow-sm). Focus: 2px ring. Invalid (aria-invalid): danger border + danger focus ring. Disabled: disabled tokens. - Helper and error share the slot — show the error when present, otherwise the helper.
Accessibility
- Associate the label via
for/id. Link the error witharia-describedbyand mark the fieldaria-invalid="true".
Known gaps
- Number-input, file-input, and multi-select are pending stubs in the spec.