⌘K

text-area component

Drop-in semantic component. See examples, sizes, variants, and source.

Multi-line text input. Drop a textarea standalone, or wrap it in a textarea-field for label + hint composition. auto-resize grows the height with content; pair a textarea-wrapper.with-counter + data-counter="true" for character counts. Behavior helpers ship in textarea.js.

Text Area System

Basic Text Areas - Flexible Input Structure

Please provide at least 50 characters

Text Area Sizes - Consistent Scaling

State Variants - Visual Feedback

This field is required
Looks good!
Please review your input
This field is disabled

Character Counter - Track Input Length

Basic Counter:

72/200 CHARACTERS

Near Limit (Warning State):

252/280 CHARACTERS

At Limit (Error State):

50/50 MAX
You've reached the character limit

Auto-resize - Dynamic Height Adjustment

Grows as you type:

This textarea will expand as you type (max height: 300px)

With character counter:

0/500 CHARACTERS

Advanced Features - Complete Form Fields

Full-featured form field:

0/1000 CHARACTERS
Minimum 100 characters required. Be as specific as possible.

Read-only display:

Fixed size (no resize handle):

Resize handle is disabled

Container Inheritance - Bulk Sizing

Apply size to container for all children:

Individual override:

Color Variants - Themed Inputs

Validation - Real-time Feedback

Required field validation:

Leave blank and blur to see validation

With minimum length:

0/500 MIN 50

Class API Reference

Type Class Usage Notes
Base textarea Required base class on the <textarea> Always required
textarea-field Container for label + textarea + hint Owns size and state for the whole field
textarea-wrapper Wraps the textarea for counter / floating-label positioning Use when adding a counter child
label / hint / counter Inner pieces Children of textarea-field / textarea-wrapper
Sizes xs Tiny — 60px min height Modifier on textarea or textarea-field
sm Small — 80px min height Modifier on textarea or textarea-field
(default) Medium — 100px min height No size class needed
xl Large — 120px min height Modifier on textarea or textarea-field
lg Big — 140px min height Modifier on textarea or textarea-field
Intents primary Blue border + focus ring Modifier on textarea
positive Green border + focus ring Modifier on textarea
negative Red border + focus ring Modifier on textarea
warning Yellow border + focus ring Modifier on textarea
info Blue (lighter) border + focus ring Modifier on textarea
States error Red border + tinted label/hint On textarea or textarea-field
success Green border + tinted label/hint On textarea or textarea-field
warning Yellow border + tinted label/hint On textarea-field
disabled Greyed-out, non-editable HTML disabled attribute
readonly Locked content, looks like display HTML readonly attribute
Layout auto-resize Height grows with content Pair with data-autoresize="true"
no-resize Disables user resize handle Modifier on textarea
floating Floating-label variant Modifier on textarea-field
textareas Container — children inherit size and color Use with sm, xl, etc.
Wrapper with-counter Reserves bottom padding for the counter overlay Modifier on textarea-wrapper
counter.warning Yellow counter color (near limit) Modifier on counter
counter.error Red counter color (at/over limit) Modifier on counter