Headless UI v1.5: コンボボックス搭載

Headless UI v1.5 をリリースしました。これには、まったく新しい Combobox コンポーネントが含まれています。コンボボックスは、選択コントロールに似ていますが、オートコンプリート/タイプアヘッド機能が追加されており、大規模なデータセットを扱い、適切なオプションをすばやくフィルタリングしたい場合に、通常の選択肢の優れた代替手段となります。

他のすべての Headless UI コンポーネントと同様に、コンボボックスは複雑なアクセシビリティに関する考慮事項をすべて抽象化しますが、スタイリングは完全にユーザーに委ねられているため、キーボードナビゲーションやスクリーンリーダーのサポートなどを気にすることなく、必要なコンボボックスを完全にコントロールして設計できます。

動作を確認したい場合は、簡単なデモをご覧ください。

結果のフィルタリングを完全に制御できるように、意図的に設計しました。基本的な文字列比較を実行したり、Fuse.js のようなファジー検索ライブラリを使用したり、API にサーバーサイドリクエストを送信したりできます。プロジェクトに合った方法を使用できます。

基本的な文字列比較を使用して結果をフィルタリングする例を次に示します。

import { useState } from 'react'
import { Combobox } from '@headlessui/react'
const people = [
  'Wade Cooper',
  'Arlene McCoy',
  'Devon Webb',
  'Tom Cook',
  'Tanya Fox',
  'Hellen Schmidt',
]
function MyCombobox() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')
  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.toLowerCase().includes(query.toLowerCase())
        })
  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson}>
      <Combobox.Input onChange={(event) => setQuery(event.target.value)} />
      <Combobox.Options>
        {filteredPeople.map((person) => (
          <Combobox.Option key={person} value={person}>
            {person}
          </Combobox.Option>
        ))}
      </Combobox.Options>
    </Combobox>
  )
}

コマンドパレット

コンボボックスは、スタンドアロンの入力として優れているだけでなく、コマンドパレットなどのより複雑なコンポーネントを構築するための低レベルのプリミティブとしても使用できます。

実はこれが、そもそもコンボボックスコンポーネントを作成するきっかけとなったものです。Tailwind UI に新しいコマンドパレットカテゴリを追加したかったのですが、それを実現するためにこのコンポーネントが必要でした。

Tailwind UI ライセンスをお持ちの場合は、新しい コマンドパレット カテゴリを参照して、これらの出来栄えを確認してください。また、気になる場合は、新しい コンボボックス カテゴリも追加しました。

新しいコマンドパレットの興奮に乗じて、Tailwind CSS、React、Headless UI を使用してコマンドパレットをゼロから構築する新しい 詳細なスクリーンキャスト も公開しました。

デザインとアニメーションを適切に調整するための興味深い Tailwind のトリックを多数取り上げており、新しいコンボボックスコンポーネントの使用方法とアプリへの組み込み方法について多くのことを学ぶことができます。

試してみてください

プロジェクトに Headless UI がすでにインストールされている場合は、v1.5 にアップグレードして、新しい Combobox コンポーネントを入手してください。これはマイナーアップデートであるため、破壊的な変更はありません。

# For React
npm install @headlessui/react
# For Vue
npm install @headlessui/vue

最新のドキュメントについては、公式サイトも必ずご確認ください。