Components
Textarea
A multi-line text field on the shared field base.
The .textarea shares the --field-* tokens with the other form controls, including
:user-invalid validation styling. It sets field-sizing: content unconditionally, so the box
auto-grows with its text and clamps between --textarea-min-block-size (5lh) and
--textarea-max-block-size (12lh), then scrolls — adjust those tokens to change the height
range. rows is not the height lever here.
Default
Loading components…
<div class="field"> <label class="field__label" for="f-message">Message</label> <textarea class="textarea" id="f-message" name="message" inputmode="text" placeholder="Your message" ></textarea></div>