फ़ॉर्म
Basic Input
A labelled text input with helper text wired to it via aria-describedby.
#input#text#label
6 फ्रेमवर्कशुरुआती
Loading…
A styled native `<select>` - the accessible baseline, with the platform popup left intact.
<!--
A real <select>. That is the entire component, and that is the point: the
browser supplies keyboard navigation, type-ahead, the platform popup and the
mobile wheel, and none of it can drift out of sync with a hand-rolled listbox.
Only the box is restyled - the popup list is the OS's and stays that way.
Reach for a custom listbox when an option row needs markup <option> cannot
hold, or when more than one value can be chosen. Never reach for one because
the arrow is the wrong grey.
-->
<div class="nsel">
<label class="nsel__label" for="nsel-plan">Plan</label>
<div class="nsel__control">
<select class="nsel__select" id="nsel-plan" name="plan">
<option value="starter">Starter</option>
<option value="growth">Growth</option>
<option value="scale">Scale</option>
<option value="enterprise">Enterprise</option>
</select>
<svg class="nsel__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="m6 9 6 6 6-6" />
</svg>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
itemsआवश्यक | SelectItem[] | - | रेंडर की जाने वाली आइटम की सूची। |
value | string | - | मेट्रिक की मौजूदा वैल्यू, पहले से फ़ॉर्मैट की हुई। |
onSelect | (value: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
disabled | boolean | false | इंटरैक्शन रोकता है और कंट्रोल को धुँधला कर देता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The only thing restyled is the box: `appearance-none` drops the OS arrow so the chevron can take its place, and everything inside the popup stays the browser’s. That is the trade being made, and it is a good one - you get keyboard navigation, type-ahead and the iOS wheel for free, and none of it can rot. `color-scheme` is the one lever CSS has over the popup itself; without it the option list paints light on a dark page. Reach for `select-custom` when an option row needs markup `<option>` cannot hold - never because the arrow is the wrong grey.