Textarea
A multi-line input that grows with what you type, starting at three lines.
Examples
Textarea
field-sizing: content — grows with what you type.Anatomy
textarea.input | Same fill, focus ring and invalid ring as .input. Every <textarea> gets field-sizing: content and a minimum of three lines from the reset. |
API
| Attribute | Values | Description |
|---|---|---|
required | boolean | As on .input: once the user has left it empty, :user-invalid draws the danger ring. |
disabled | boolean | Halves the opacity. |
Accessibility
- Label it like any input, with
<label for>oraria-label. - Because it grows with its content, set a
max-block-sizewhen the text can get long, or the page reflows on every line.
| Key | Effect |
|---|---|
| Enter | Inserts a line break; it does not submit the form. |
| Tab | Leaves the textarea; it does not insert a tab character. |