Skip to content

Textarea

Multi-line text input for longer form content, descriptions, and notes.

Max 500 characters

Variants

Textarea uses the same validation states as Input. Size picks the minimum height only — users can still drag to resize.

VariantPurpose
DefaultResting state for any multi-line field. Use for notes, descriptions, and free-form comments.
ErrorValidation has failed. Always include an error message that explains how to correct the value.
SuccessExplicit confirmation of a valid value. Reserve for contexts where success adds value.

Design tokens

TokenValueDescription
input/background/default
#ffffff
Default background
input/background/disabled
#f5f5f5
Disabled background
input/border/default
#aeaeae
Default border
input/border/focus
#318272
Focus border
input/border/error
#bc1700
Error border
input/text/value
#3b3b3d
Entered value
input/text/placeholder
#8f8f8f
Placeholder text
radius/sm
4px
Corner radius

Guidelines

Do
  • Use a label that clearly describes the expected content
  • Show character count for limited inputs
  • Allow resize when content length is variable
  • Pair with a Form Field wrapper for consistent spacing
Don't
  • Use for single-line inputs — use Input instead
  • Disable resize without a clear layout reason
  • Use placeholder text as a substitute for a label
  • Leave the field unlabelled for accessibility