セレクト (Select)

選択肢から1つまたは複数の項目を選択するためのドロップダウンコンポーネントです。検索機能やカスタムスタイルにも対応しています。

基本

基本的な使用

基本のCode:

<div>
  <label class=“label” for=“basic-select”>都道府県</label>
  <select id=“basic-select” class=“select select-md”>
    <option value="">選択してください</option>
    <option value=“tokyo”>東京都</option>
    <option value=“osaka”>大阪府</option>
  </select>
</div>

サイズ

サイズバリエーション

サイズのCode:

<select class=“select select-sm”>…</select>
<select class=“select select-md”>…</select>
<select class=“select select-lg”>…</select>

エラー状態

バリデーション状態

この項目は必須です

エラー状態のCode:

<div>
  <label class=“label label-required” for=“error-select”>必須選択項目</label>
  <select id=“error-select” class=“select select-md select-error”>
    <option value="">選択してください</option>
    <option value=“option1”>オプション1</option>
  </select>
  <div class=“error-text”>この項目は必須です</div>
</div>

複数選択

複数項目選択

Ctrl（Cmd）を押しながらクリックで複数選択

複数選択のCode:

<select class=“select select-md select-multiple” multiple>
  <option value=“javascript”>JavaScript</option>
  <option value=“typescript”>TypeScript</option>
  <option value=“react”>React</option>
</select>

カスタムセレクト

カスタムドロップダウン

ウェブ開発
モバイル開発
バックエンド
DevOps
デザイン

カスタムセレクトのCode:

<div class=“select-custom” data-select=“custom1”>
  <button type=“button” class=“select-trigger select-trigger-md”>
    <span class=“select-placeholder”>カテゴリーを選択</span>
    <svg class=“h-5 w-5 text-gray-400”>…</svg>
  </button>
  <div class=“select-dropdown”>
    <div class=“select-option” data-value=“web”>ウェブ開発</div>
    <div class=“select-option” data-value=“mobile”>モバイル開発</div>
  </div>
</div>

検索機能付き

検索可能セレクト

🇯🇵 日本
🇺🇸 アメリカ
🇬🇧 イギリス
🇩🇪 ドイツ
🇫🇷 フランス
🇰🇷 韓国
🇨🇳 中国
🇦🇺 オーストラリア

検索機能のCode:

<div class=“select-custom” data-select=“search1”>
  <button type=“button” class=“select-trigger select-trigger-md”>
    <span class=“select-placeholder”>国を選択</span>
  </button>
  <div class=“select-dropdown”>
    <input type=“text” class=“select-search” placeholder=“国名で検索…” />
    <div class=“select-option” data-value=“jp”>🇯🇵 日本</div>
    <div class=“select-option” data-value=“us”>🇺🇸 アメリカ</div>
  </div>
</div>

グループ化

オプショングループ

グループ化のCode:

<select class=“select select-md”>
  <option value="">言語を選択</option>
  <optgroup label=“フロントエンド”>
    <option value=“javascript”>JavaScript</option>
    <option value=“typescript”>TypeScript</option>
  </optgroup>
  <optgroup label=“バックエンド”>
    <option value=“python”>Python</option>
    <option value=“java”>Java</option>
  </optgroup>
</select>

実用的なパターン

住所入力フォーム

検索フィルター

アプリケーション設定

住所フォームのCode:

<div class=“grid md:grid-cols-2 gap-4”>
  <div>
    <label class=“label label-required” for=“prefecture”>都道府県</label>
    <select id=“prefecture” class=“select select-md”>
      <option value="">選択してください</option>
      <option value=“tokyo”>東京都</option>
    </select>
  </div>
  <div>
    <label class=“label label-required” for=“city”>市区町村</label>
    <select id=“city” class=“select select-md” disabled>
      <option value="">都道府県を選択してください</option>
    </select>
  </div>
</div>

フィルターのCode:

<div class=“grid md:grid-cols-3 gap-4”>
  <div>
    <label class=“label” for=“filter-category”>カテゴリー</label>
    <select id=“filter-category” class=“select select-sm”>
      <option value="">すべて</option>
      <option value=“electronics”>電子機器</option>
    </select>
  </div>
</div>

アクセシビリティ

  • • すべてのSelectには対応するlabel要素を適切に関連付け
  • • aria-requiredで必須項目を明示
  • • エラー状態ではaria-invalidとaria-describedbyを使用
  • • カスタムSelectにはrole="combobox"とaria-haspopupを設定
  • • キーボード操作（Tab、Enter、Space、矢印キー、Escape）に対応
  • • フォーカス表示が明確に見える
  • • 選択された項目はaria-selectedで状態を通知
  • • グループ化されたオプションはoptgroupで構造化
  • • 複数選択では選択済み項目数をスクリーンリーダーに通知
  • • 検索機能付きSelectはaria-autocompleteを設定
このSelectはスクリーンリーダーに対応しています