Starts at about four lines and resizes vertically.
Textarea
Textarea is the multi-line sibling of Text Field. It keeps the same field contract of one visible label, one native control, and optional supporting or error text, and adds a starting height, vertical resize, and an opt-in autosize variant with no JavaScript.
Public web API
One root hook, two optional message hooks, an optional variant and size, and native textarea attributes.
<div data-bitsy-textarea>
<label for="feedback">Feedback</label>
<textarea id="feedback" name="feedback" rows="4" aria-describedby="feedback-help"></textarea>
<p id="feedback-help" data-bitsy-textarea-description>
Tell us what worked and what did not.
</p>
</div>
<div data-bitsy-textarea data-bitsy-variant="autosize">
<label for="bio">Bio</label>
<textarea id="bio" name="bio" aria-invalid="true" aria-describedby="bio-error"></textarea>
<p id="bio-error" data-bitsy-textarea-error>
Add a short bio before you continue.
</p>
</div>rows sets the starting height. Without it the control starts at about four lines. data-bitsy-variant="autosize" grows with content up to about twelve lines where field-sizing is supported, and keeps the rows height elsewhere.
Variants, sizes, and states
Type into the autosize example to see it grow.
Grows with content up to about twelve lines, then scrolls.
Add a message before you send.
Readonly keeps the value available without allowing edits.
Disabled keeps the field present but unavailable.
Foundation versus Bit
Raw textareas still inherit the foundation baseline. data-bitsy-textarea adds the field structure, message hooks, sizes, readonly and invalid treatment, and autosize. Character counters, rich text, and code editing stay out of this first Bit.