फ़ॉर्म
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").