फ़ॉर्म
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 फ्रेमवर्कशुरुआती
Loading…
A field with attached prefix and suffix addons - https:// … .com.
<!--
The addons are aria-hidden, and that is the point: "https://" and ".com" are
scaffolding the user cannot edit, not part of the field's name. Left audible
they turn the announcement into "https:// Site domain .com edit text", which
is noise. The label says what to type; the addons show where it lands.
The focus ring goes on the WRAPPER, not the input - the input has no border of
its own, so a ring on it would draw inside the group and look like a bug.
-->
<div class="addon-field">
<label class="addon-field__label" for="addon-field-domain">Site domain</label>
<div class="addon-field__group">
<span class="addon-field__addon addon-field__addon--prefix" aria-hidden="true">https://</span>
<input
class="addon-field__input"
id="addon-field-domain"
name="domain"
type="text"
placeholder="adysre"
aria-describedby="addon-field-domain-help"
/>
<span class="addon-field__addon addon-field__addon--suffix" aria-hidden="true">.com</span>
</div>
<p class="addon-field__help" id="addon-field-domain-help">Lowercase letters and hyphens only.</p>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
value | string | - | मेट्रिक की मौजूदा वैल्यू, पहले से फ़ॉर्मैट की हुई। |
disabled | boolean | false | इंटरैक्शन रोकता है और कंट्रोल को धुँधला कर देता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The addons are `aria-hidden`, and that is the point: `https://` and `.com` are scaffolding the user cannot edit, not part of the field name. Left audible they turn the announcement into "https:// Site domain .com edit text". The label says what to type; the addons show where it lands. The wrapper owns the border, the radius and - via `focus-within` - the focus ring, because the group is what the user perceives they are focusing; a ring on the borderless input would draw inside the group and look like a bug. Pass either `prefix` or `suffix` alone for a one-sided field.