フォーム
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 個のフレームワーク初級
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 | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
value | string | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
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.