メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

コンボボックスコンポーネント

最終更新日:

CSS-only Tailwind CSS combobox with live search filtering and accessible dropdown list.キーボードナビゲーション、カラーバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

コンボボックスは、テキスト入力とドロップダウン リストを組み合わせます。フィールドの input コンポーネントを使用します。サイズ、色、状態のバリアントはそこから取得されます。 combobox-* ユーティリティは、ドロップダウン リスト、項目、開いた状態のみを処理します。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
combobox-listベースコンボボックスオプションのドロップダウンリストコンテナ
combobox-item修飾子ドロップダウン リスト内の個別のオプション
combobox-open修飾子ラッパーに適用されるときにドロップダウン リストを表示します
combobox-primary色アイテムの主要テーマカラーのハイライト
combobox-secondary色アイテムの二次テーマカラーのハイライト
combobox-accent色アイテムのアクセントテーマカラーのハイライト
combobox-info色情報セマンティックカラーハイライト
combobox-success色成功のセマンティックカラーのハイライト
combobox-warning色警告セマンティックカラーのハイライト
combobox-error色エラーのセマンティックカラーのハイライト

基本的な使い方

input と combobox-list を relative コンテナにラップします。 combobox-open をラッパーに追加してリストを表示します。JS または :focus-within を介して切り替えます。

  • React
  • Vue
  • Angular
  • Svelte
1
2
3
4
5
6
7
8
9
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search or select...">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useCombobox } from 'frutjam/react'

const frameworks = ['React', 'Vue', 'Angular', 'Svelte']

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search or select..." />
      <ul className="combobox-list" role="listbox">
        {combo.filtered.map((item, i) => (
          <li key={item} {...combo.optionProps(item, i)} className="combobox-item">{item}</li>
        ))}
      </ul>
    </div>
  )
}

オープン オン フォーカス

入力がフォーカスされているときにリストを開くには、ラッパーで focus-within:combobox-open を使用します。JavaScript は必要ありません。

  • React
  • Vue
  • Angular
  • Svelte
html 
1
2
3
4
5
6
7
8
9
<div class="relative w-64 focus-within:combobox-open">
  <input type="text" class="input w-full" placeholder="Focus to open...">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

サイズ

入力フィールドで input-sm、input-lg などを使用します。ドロップダウンは自然に適応します。

  • Banana
  • Mango
  • Papaya
  • Banana
  • Mango
  • Papaya
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-sm w-full" placeholder="Small">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-lg w-full" placeholder="Large">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>

色

フィールド色の入力には input-primary などを使用します。対応する combobox-primary をラッパーに追加して、アクティブな項目のハイライトに色合いを付けます。

  • React
  • Vue
  • Angular
  • React
  • Vue
  • Angular
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64 combobox-open combobox-primary">
  <input type="text" class="input input-primary w-full" placeholder="Primary">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>
<div class="relative w-64 combobox-open combobox-error">
  <input type="text" class="input input-error w-full" placeholder="Error">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>

無効

html 
1
2
3
<div class="relative w-64">
  <input type="text" class="input w-full" placeholder="Disabled" disabled>
</div>

ボタン付き

join で作成して、検索アイコンまたはトリガー ボタンを添付します。

🔍
  • React
  • Vue
  • Angular
  • Svelte
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="relative w-64 combobox-open">
  <div class="join w-full">
    <span class="join-item btn btn-soft">🔍</span>
    <input type="text" class="input join-item" placeholder="Search...">
  </div>
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

リンクまたはボタンとしての項目

combobox-item は、<li>、<a>、または <button> の任意の要素で機能します。

html 
1
2
3
4
5
6
7
8
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search pages...">
  <ul class="combobox-list">
    <a href="#" class="combobox-item">Home</a>
    <a href="#" class="combobox-item combobox-item-active">About</a>
    <button class="combobox-item">Contact</button>
  </ul>
</div>

JS と React ヘルパー

frutjam/js の createCombobox または frutjam/r​​eact の useCombobox を使用して、フィルタリング、キーボード ナビゲーション (↑ ↓ Enter Escape)、完全な aria-* 配線をすぐに使用できます。選択を処理するための fj:select イベントをリッスンします。

  • React
  • Vue
  • Angular
  • Svelte
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64" id="js-combobox">
  <input type="text" class="input w-full" placeholder="Search frameworks...">
  <ul class="combobox-list">
    <li class="combobox-item" data-value="react">React</li>
    <li class="combobox-item" data-value="vue">Vue</li>
    <li class="combobox-item" data-value="angular">Angular</li>
    <li class="combobox-item" data-value="svelte">Svelte</li>
  </ul>
</div>
<script type="module">
  import { createCombobox } from 'frutjam/js'
  const combo = createCombobox(document.getElementById('js-combobox'))
  document.getElementById('js-combobox').addEventListener('fj:select', (e) => {
    console.log('Selected:', e.detail.value)
  })
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useCombobox } from 'frutjam/react'

const frameworks = [
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' },
  { label: 'Angular', value: 'angular' },
  { label: 'Svelte', value: 'svelte' },
]

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search frameworks..." />
      <ul {...combo.listboxProps} className="combobox-list">
        {combo.filtered.map((item, i) => (
          <li key={item.value} {...combo.optionProps(item, i)}>{item.label}</li>
        ))}
      </ul>
    </div>
  )
}

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な コンボボックス クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる