セレクト

React Ariaで実装したドロップダウン型のセレクト。トリガーはFigmaのデザインを忠実に再現しています。ポップオーバーは非モーダルなのでページのスクロールを維持でき、項目にはステータスの丸やアバターなど自由な内容を表示できます。

インストール

この選択コンポーネントを CLI または手動で追加できます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add select

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

コンパクトとコンフォータブル

メニューはデフォルトで BoardUI のコンパクトなドロップダウンです。角丸 14px・パディング 4px のパネルに詰まった行が並び、幅はトリガーと同じです。長いリストは上端のやわらかなぼかしの下でスクロールし、選択中の行を表示した状態で開きます。ゆったりした 266px のメニューには variant="comfortable" を渡します。

コンパクト

コンフォータブル

const years = Array.from({ length: 41 }, (_, index) => 2000 + index);
{/* Compact is the default menu: no prop needed */}<Select label="Compact" defaultSelectedKey="2026" className="w-[120px]">  {years.map((year) => (    <SelectItem key={year} id={String(year)}>{year}</SelectItem>  ))}</Select>
{/* The roomier 266px menu */}<Select label="Comfortable" variant="comfortable" defaultSelectedKey="2026" className="w-[120px]">  {years.map((year) => (    <SelectItem key={year} id={String(year)}>{year}</SelectItem>  ))}</Select>

ラベルとプレースホルダー

表示されるフィールドラベルには label を渡してください。React Aria がそれをセレクトのラベルとして描画し、トリガーの名前にも使うため、スクリーンリーダーは両方を読み上げます。placeholder は何かが選ばれるまで表示されます。上のフィルターのように表示ラベルのないセレクトには、代わりに aria-label を指定します。

役割

{/* label names the select; placeholder shows until something is picked */}<Select label="Role" placeholder="Select a role" className="w-[240px]">  <SelectItem id="admin" textValue="Admin">Admin</SelectItem>  <SelectItem id="editor" textValue="Editor">Editor</SelectItem>  <SelectItem id="viewer" textValue="Viewer">Viewer</SelectItem></Select>

ステータスドット

アイテムは、ラベルの横にある任意の子供をレンダー - 常にパスします textValue なので、typeahead とトリガーラベルは正しいままです。

import { StatusDot } from "@/components/base/badges/status-dot";
{/* Items take free-form content - dots, avatars, icons */}<Select aria-label="Purchase status" defaultSelectedKey="completed" className="w-[142px]">  <SelectItem id="completed" textValue="Completed">    <StatusDot color="green" />    Completed  </SelectItem>  <SelectItem id="waiting" textValue="Waiting">    <StatusDot color="yellow" />    Waiting  </SelectItem>  <SelectItem id="processing" textValue="Processing">    <StatusDot color="indigo" />    Processing  </SelectItem></Select>