Textarea

A textarea is a multi-line input for free-form copy: messages, descriptions, comments. Zazz's textarea styles the native <textarea> element to match the Input primitive and uses field-sizing: content so the field grows as the user types.

Default

export default function TextareaDefault() {  return <textarea className="textarea" placeholder="Your message…" rows={4} />;}

<textarea class="textarea" placeholder="Your message…"></textarea>

Tokens

Form composition

<div class="form-group">
  <label class="form-label" for="message">Message</label>
  <textarea class="textarea" id="message" placeholder="Your message…"></textarea>
</div>

Auto-growing

field-sizing: content makes the textarea grow vertically as the user types, capped only by viewport (or any max-height you set). It starts at --step-24 (6rem at default interval) so an empty textarea has visible breathing room.

To disable auto-grow, override the property:

.textarea-fixed {
  field-sizing: auto;
  resize: vertical;
}

States

• Default. Border --border, background --input.
• Hover. Border lifts to --primary.
• Focus. Border stays --primary; the focus ring applies via box-shadow: var(--focus-ring).
• Disabled. Set the disabled attribute. Pointer events disable; contrast drops.
• Invalid. Pair with form-error for the destructive-themed message.

Accessibility

• Every textarea needs a label, visible or via sr-only.
• placeholder is for examples or hints, not labels.
• For long-form composition (essays, code), consider adding aria-describedby to a character count or formatting note.

Cross-platform

Where to next