表单
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").