Textarea

wu-textarea styles a <textarea>. Core’s base styles already style it like an input; the kit adds the radius, the type size and a height between three and twelve lines. It grows with the text between those bounds and ignores rows.

Class, attribute or variable	Effect
`wu-textarea`	Root. Vertical resize, bounded height
`disabled`	Not-allowed cursor, no resize
`readonly`	Alternate background
`aria-invalid="true"` or `:user-invalid`	Core’s danger border, doubled to 2px by the kit so the change is not color alone
`--wu-textarea--MinHeight`, `--wu-textarea--MaxHeight`	Height bounds

Default

Notes

<div class="wu-field">
  <label class="wu-field-label" for="textarea-notes">Notes</label>
  <textarea class="wu-textarea" id="textarea-notes">Type more lines to see the field grow.</textarea>
</div>

States

Read only

<div class="flex col gap-3">
  <textarea class="wu-textarea" aria-label="Disabled" disabled>Disabled</textarea>
  <textarea class="wu-textarea" aria-label="Read only" readonly>Read only</textarea>
  <textarea class="wu-textarea" aria-label="Invalid" aria-invalid="true">Too short</textarea>
</div>

Height bounds

<textarea class="wu-textarea" aria-label="Short note" style="--wu-textarea--MinHeight: 2.5rem; --wu-textarea--MaxHeight: 6rem">One line to start.</textarea>

Load only the textarea

@use "@wovenui/components/textarea";

The textarea needs no other component. It relies on core’s base styles for fields.