A text area lets the user enter text over multiple lines: comments, feedback or longer passages that need more room than a single-line input.
How to add a text area to a page. The file is components/css/textarea.css.
Link the shared stylesheet once per page, and add the keyboard script and, for a word count, the count script. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/textarea.css">. Both templates already have it. |
| 2. Markup | A form-field with a label, an input-wrap around the textarea.form-textarea, and an optional form-helper message. |
| 3. Word count | Put the label and a span.form-count in a div.form-field__head, set maxlength, and bind the count (script under CSS / Tailwind). |
| 4. Keyboard focus | Add the script under CSS / Tailwind once per page. Without it the ring never shows on keyboard focus. |
Copy the markup you need. Hover and focus come from :hover and keyboard focus; the [data-state] selectors in the CSS exist only so the documentation can force a state.
| Class | Use |
|---|---|
form-field | The column: label row, wrapper, message. |
form-field__head | The label row, with the word count on the right. |
form-label | The label. Use form-label--sm from input.css for the small label of a docs control. |
form-count | The word count. |
input-wrap | The wrapper that draws the focus ring. |
form-textarea, --error, --success | The text area and its error and success border. |
form-helper, --error, --success, --disabled | The message. |
:placeholder-shown, so the placeholder is required.resize: vertical) and never goes below 66px.maxlength to match.[data-state] selectors do nothing outside the documentation pages.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.