ड्रॉपडाउन
Basic Dropdown
A menu button with the full keyboard model - arrows, Home/End, Escape, focus restore.
#dropdown#menu#keyboard
6 फ्रेमवर्कमध्यम
Loading…
A menu with a search field that narrows the items as you type.
<!--
A search field narrows the menu as you type. ArrowDown drops focus from the
field onto the first match; the item ring wraps; ArrowUp off the top row goes
back to the field. The field owns aria-controls/aria-expanded; the list stays a
role="menu" of actions. Panel capped at calc(100vw-2rem).
-->
<div class="relative inline-block">
<button type="button" aria-haspopup="menu" aria-expanded="true" aria-controls="sf-menu" class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
Actions
<svg class="h-4 w-4" 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>
</button>
<div class="absolute left-0 top-[calc(100%+0.375rem)] z-20 w-64 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<div class="p-1">
<input type="text" placeholder="Search…" aria-label="Search…" aria-controls="sf-menu" class="w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-500" />
</div>
<ul id="sf-menu" role="menu" aria-label="Actions" class="max-h-56 overflow-y-auto">
<li role="none"><button type="button" role="menuitem" class="block w-full truncate rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:bg-gray-100 focus-visible:text-gray-900 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:bg-gray-800 dark:focus-visible:text-gray-100">Assign to me</button></li>
<li role="none"><button type="button" role="menuitem" class="block w-full truncate rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:bg-gray-100 focus-visible:text-gray-900 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:bg-gray-800 dark:focus-visible:text-gray-100">Add label</button></li>
<li role="none"><button type="button" role="menuitem" class="block w-full truncate rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:bg-gray-100 focus-visible:text-gray-900 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:bg-gray-800 dark:focus-visible:text-gray-100">Move to project</button></li>
</ul>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
itemsआवश्यक | string[] | - | रेंडर की जाने वाली आइटम की सूची। |
searchPlaceholder | string | - | Placeholder |
onSelect | (item: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
The search field owns `aria-controls` and `aria-expanded`; the list below stays a `role="menu"` of actions. ArrowDown drops focus from the field onto the first match, the item ring wraps, and ArrowUp off the top row returns to the field - so the whole thing is reachable without touching the mouse. An empty result set shows a plain "No matches" row rather than an empty box. The panel is width-capped and scrolls internally, never past a 320px viewport.