Components · Forms & selection
Textarea
A multi-line text input — the same chrome as Input, with an 88px minimum height and vertical-only resize. Pairs with the same field, label, helper and error parts.
Preview
Light
A short description for your profile.
Dark
A short description for your profile.
Accessibility
A short description for your profile.
Spec
Values and token references straight from the Zetta spec.
textarea
- 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
- minHeight
- 88px
- paddingX
- 14px
- paddingY
- 12px
- resize
- vertical
textarea-hover
- borderColor
- {colors.border-strong}
- boxShadow
- {shadows.sm}
textarea-focus
- borderColor
- {colors.border-focus}
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
textarea-disabled
- backgroundColor
- {colors.disabled-bg}
- textColor
- {colors.disabled-text}
- borderColor
- {colors.disabled-border}
- cursor
- not-allowed
- resize
- none
Build with the skill
No package to install — hand this to your AI to generate the textarea in your stack.
Implement the Zetta "Textarea" component in this project's stack using the zetta-design-md skill.
- Apply the `textarea` 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
- 14px padding, 8px radius,
border-strongborder, 88px min-height,resize: vertical. Placeholder is italicplaceholdercolor. - Hover lifts
var(--shadow-sm); focus rings; invalid (aria-invalid) turns the border danger; disabled uses the disabled tokens and locks resize.
Accessibility
- Associate the label via
for/id; link errors witharia-describedbyand setaria-invalid="true".
Known gaps
- Auto-grow and character-count variants are not yet specified.