ドロップダウン
Basic Dropdown
A menu button with the full keyboard model - arrows, Home/End, Escape, focus restore.
#dropdown#menu#keyboard
6 個のフレームワーク中級
Loading…
A menu of checkbox rows that stays open so you can tick several at once.
<!--
Each row is role="menuitemcheckbox" carrying its own aria-checked, and toggling
one leaves the menu OPEN - the point of multi-select is to tick several without
the panel closing under you. The check mark glyph is aria-hidden; aria-checked
is the state a screen reader reads.
-->
<div class="relative inline-block">
<button type="button" aria-haspopup="menu" aria-expanded="true" aria-controls="cb-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">
Teams
<span class="rounded-full bg-blue-600 px-1.5 text-xs font-semibold text-white dark:bg-blue-500">1</span>
<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>
<ul id="cb-menu" role="menu" aria-label="Teams" class="absolute left-0 top-[calc(100%+0.375rem)] z-20 min-w-56 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">
<li role="none">
<button type="button" role="menuitemcheckbox" aria-checked="false" class="flex w-full items-center gap-2.5 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">
<span aria-hidden="true" class="flex h-4 w-4 flex-none items-center justify-center rounded border border-gray-300 dark:border-gray-600"></span>
Design
</button>
</li>
<li role="none">
<button type="button" role="menuitemcheckbox" aria-checked="true" class="flex w-full items-center gap-2.5 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">
<span aria-hidden="true" class="flex h-4 w-4 flex-none items-center justify-center rounded border border-blue-600 bg-blue-600 text-white dark:border-blue-500 dark:bg-blue-500">
<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 5 5L20 7" /></svg>
</span>
Engineering
</button>
</li>
<li role="none">
<button type="button" role="menuitemcheckbox" aria-checked="false" class="flex w-full items-center gap-2.5 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">
<span aria-hidden="true" class="flex h-4 w-4 flex-none items-center justify-center rounded border border-gray-300 dark:border-gray-600"></span>
Marketing
</button>
</li>
</ul>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
options必須 | Option[] | - | レンダリングする項目の配列。 |
value必須 | string[] | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
onChange | (next: string[]) => void | - | On change |
Each row is a `role="menuitemcheckbox"` carrying its own `aria-checked`, and toggling one deliberately leaves the menu OPEN - the whole point of multi-select is to tick several without the panel closing under you. The check-mark glyph is `aria-hidden`; `aria-checked` is the state a screen reader actually reads. The trigger shows a count badge so the current selection is legible without opening. Value is controlled, so the parent owns the source of truth.