Textarea
Markdown is supported.
<div class="field"> <label class="label" for="textarea-bio">Bio</label> <textarea class="textarea" id="textarea-bio" placeholder="Tell us about yourself"></textarea> <p class="field-description">Markdown is supported.</p></div><textarea class="textarea" placeholder="Tell us about yourself"></textarea>The textarea grows with its content through field-sizing: content, so there is no resize script
to wire up. min-height keeps it from collapsing when empty.
Markdown is supported.
<div class="field"> <label class="label" for="textarea-field">Release notes</label> <textarea class="textarea" id="textarea-field" placeholder="What changed?"></textarea> <p class="field-description">Markdown is supported.</p></div>Disabled
Section titled “Disabled”<div class="field"> <label class="label" for="textarea-disabled">Notes</label> <textarea class="textarea" id="textarea-disabled" disabled>Locked while the job runs.</textarea></div>Invalid
Section titled “Invalid”Write at least 20 characters.
<div class="field" data-invalid> <label class="label" for="textarea-invalid">Summary</label> <textarea class="textarea" id="textarea-invalid" aria-invalid="true" aria-describedby="textarea-invalid-error">Too short</textarea> <p class="field-error" id="textarea-invalid-error">Write at least 20 characters.</p></div>aria-invalid on the control recolours the border and ring; data-invalid on the .field carries
it to the label too.
Button
Section titled “Button”A submit control below the textarea, aligned to the trailing edge.
<div class="field"> <label class="label" for="textarea-with-button">Comment</label> <textarea class="textarea" id="textarea-with-button" placeholder="Leave a comment"></textarea> <div style="display: flex; justify-content: flex-end"> <button class="btn btn-sm" type="submit">Post</button> </div></div>Fixed height
Section titled “Fixed height”Override field-sizing when you want a stable box.
<textarea class="textarea" style="field-sizing: fixed; height: 8rem" placeholder="Fixed height" aria-label="Fixed height example"></textarea>Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading
direction on their own. See the button page for a live example.
Accessibility
Section titled “Accessibility”The same rules as any control: a real <label> with for, aria-describedby pointing at the help
or error text, and aria-invalid when it is wrong.
Growing with its content is also an accessibility win — a fixed box that hides what the user typed is harder to review, especially at large text sizes.