Textarea
A multi-line text field that grows with its content.
Basic
Add .textarea to any <textarea>. The input's fixed-height contract drops, so rows and content drive the height. The resize handle is vertical only, so the width tracks the parent.
Sizes
Three sizes match the input scale so a textarea sits beside an input in the same row. Add .textarea--sm or .textarea--lg.
Helper text
Use .field__description below the field for short hints. Wire it to the textarea with aria-describedby so screen readers announce it.
Browser validation
Pair native constraint attributes (required, minlength, maxlength) with the :user-invalid pseudo. The browser fires it after the user interacts, and clears it once the value satisfies the constraints.
Server validation
Set aria-invalid="true" from your form library. The attribute is sticky; Stisla just paints while it's present. Pair with a .field__error tied via aria-describedby.
Disabled and readonly
disabled blocks interaction and dims the field. readonly keeps the value selectable for copy but rejects edits; the bg shifts a tier so the state reads.
Customization
These variables retune .textarea independently of .input. --textarea-height acts as a min-height floor; the field grows past it as content fills in.
On touch devices (@media (pointer: coarse)) --textarea-font-size is bumped to 1rem so iOS Safari doesn't zoom on focus.
| Variable | Use |
|---|---|
--textarea-radius | Corner radius; the sm and lg variants reassign this |
--textarea-height | Min-height floor; the field grows past this. The sm and lg variants reassign this |
--textarea-padding-inline | Horizontal padding; the sm and lg variants reassign this |
--textarea-padding-block | Vertical padding around the text |
--textarea-font-size | Text size; the sm and lg variants reassign this |
--textarea-line-height | Line height of the wrapped text; defaults to the normal leading scale |
--textarea-bg | Background; readonly shifts a tier |
--textarea-color | Text color |
--textarea-border-width | Border thickness |
--textarea-border-color | Border color; validation hooks flip this to the danger token |
--textarea-placeholder | Placeholder text color |