DesignTextarea

Multi-line text input matching DesignInput styling with Inter font, elevation shadows, and letter-spacing -0.02em

Size Variants (Side-by-side Comparison)

Small
80px min
size="small"
Default
100px min
(no size prop)
Large
120px min
size="large"

Basic Textarea

Minimal usage with placeholder

Props:
{ placeholder: "Enter text..." }

With Default Value

Pre-filled with multi-line content

Props:
{ value: "Default text..." }

Disabled State

Non-interactive with 44% opacity

Props:
{ disabled: true, value: "Disabled textarea" }

Custom Height

Control height with className

Props:
{ className: "min-h-[200px]" }

Design Specifications

Sizing
  • • Min height: 80px (small) / 100px (default) / 120px (large)
  • • Border radius: 12px
  • • Padding: 10px all sides
  • • Letter spacing: -0.02em
States
  • • Normal: elevation-100 shadow
  • • Hover: --input-hover shadow
  • • Focus: --input-focus shadow
  • • Disabled: surface-400 bg, 44% opacity
Typography
  • • Font size: 13px (small/default) / 14px (large)
  • • Line height: 16px (small/default) / 18px (large)
  • • Font family: Inter
  • • Placeholder: font-tertiary color
Behavior
  • • Resize: disabled by default
  • • Smooth shadow transitions (200ms)
  • • Apple-style easing curve
  • • Matches DesignInput styling