フォーム
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 個のフレームワーク初級
Loading…
An invalid field whose error message is wired to it with aria-describedby.
<!--
Red is not the error state. A red border is invisible to a red-blind user and
completely silent to a screen reader - the two attributes below are what make
this field actually invalid:
aria-invalid="true" the field announces as invalid
aria-describedby=… the announcement includes WHY
The colour is the third channel, not the only one. The icon and the message
text carry the same information for anyone the hue does not reach.
-->
<div class="error-field">
<label class="error-field__label" for="error-field-email">Email address</label>
<input
class="error-field__input"
id="error-field-email"
name="email"
type="email"
value="jane@"
aria-invalid="true"
aria-describedby="error-field-email-msg"
/>
<p class="error-field__message" id="error-field-email-msg">
<svg class="error-field__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="9" />
<path d="M12 8v4M12 16h.01" />
</svg>
Enter a complete email address, like jane@example.com.
</p>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
message | string | - | 通知の本文。 |
value | string | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
Red is not the error state. A red border is invisible to a red-blind user and completely silent to a screen reader - `aria-invalid="true"` is what makes the field announce as invalid, and `aria-describedby` is what makes the announcement include why. Colour is the third channel, alongside the icon and the message text. The styling hangs off `[aria-invalid]` rather than an `.is-error` class, so the attribute screen readers act on and the attribute that paints the border are the same one and cannot drift apart. The TypeScript variant derives both from `error`, making a red-but-valid field unrepresentable. Write the message as a fix ("Enter a complete email address, like jane@example.com"), not a diagnosis ("Invalid input").