Forms
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 frameworksBeginner
Loading…
A labelled multi-line field with helper text and a vertical resize handle.
<!--
Same three parts as a text input, one extra decision: rows. It is the initial
height, and it is a promise about how much you expect someone to write -
rows="4" invites a paragraph, rows="2" invites a sentence. Set it to the
answer you actually want.
-->
<div class="ta-field">
<label class="ta-field__label" for="ta-field-bio">Short bio</label>
<textarea
class="ta-field__input"
id="ta-field-bio"
name="bio"
rows="4"
placeholder="Tell us what you work on."
aria-describedby="ta-field-bio-help"
></textarea>
<p class="ta-field__help" id="ta-field-bio-help">Shown on your public profile.</p>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Accessible label announced while loading. |
value | string | - | The metric's current value, pre-formatted. |
disabled | boolean | false | Prevents interaction and dims the control. |
className | string | - | Additional classes merged onto the root element. |
Same three parts as a text input, plus one decision: `rows` is the initial height and a promise about how much you expect someone to write - `rows="4"` invites a paragraph, `rows="2"` invites a sentence. Set it to the answer you actually want. `font-family: inherit` (`font-sans` in the Tailwind variant) is not optional: a textarea does not inherit the page font, and without it the field renders in the browser monospace default and looks like a bug.