セレクト

インストール

まず、npm を使用して Headless UI をインストールします。

npm install @headlessui/react

基本例

セレクトコントロールは、Selectコンポーネントを使用して構築されます。

import { Select } from '@headlessui/react'

function Example() {
  return (
    <Select name="status" aria-label="Project status">
      <option value="active">Active</option>
      <option value="paused">Paused</option>
      <option value="delayed">Delayed</option>
      <option value="canceled">Canceled</option>
    </Select>
  )
}

通常のネイティブのselect要素に渡すのと同じように、Selectに任意のプロップスを渡すことができます。

スタイリング

Headless UIは、セレクトがフォーカスされているかどうか、ポップオーバーが開いているか閉じているか、キーボードで現在フォーカスされているメニュー内の項目など、各コンポーネントに関する多くの状態を追跡します。

ただし、コンポーネントはヘッドレスで、箱から出して完全にスタイルが適用されていないため、各状態に必要なスタイルを自分で提供するまで、UIでこの情報を確認することはできません。

データ属性の使用

Headless UIコンポーネントのさまざまな状態をスタイルする最も簡単な方法は、各コンポーネントが公開するdata-*属性を使用することです。

たとえば、Selectコンポーネントは、セレクトがキーボードで現在フォーカスされているかどうかを示すdata-focus属性と、セレクトが現在マウスでホバーされているかどうかを示すdata-hover属性を公開します。

<!-- Rendered `Select` -->
<select name="status" data-focus data-hover>
  <option value="active">Active</option>
  <option value="paused">Paused</option>
  <option value="delayed">Delayed</option>
  <option value="canceled">Canceled</option>
</select>

CSS属性セレクターを使用して、これらのデータ属性の存在に基づいて条件付きでスタイルを適用します。Tailwind CSSを使用している場合は、データ属性修飾子を使用すると簡単になります。

import { Select } from '@headlessui/react'

function Example() {
  return (
    <Select name="status" className="border data-[hover]:shadow data-[focus]:bg-blue-100" aria-label="Project status">
      <option value="active">Active</option>
      <option value="paused">Paused</option>
      <option value="delayed">Delayed</option>
      <option value="canceled">Canceled</option>
    </Select>
  )
}

利用可能なすべてのデータ属性のリストについては、コンポーネントAPIを参照してください。

レンダープロップスの使用

各コンポーネントは、レンダープロップスを介して現在の状態に関する情報も公開します。これを使用して、異なるスタイルを条件付きで適用したり、異なるコンテンツをレンダリングしたりできます。

たとえば、Selectコンポーネントは、セレクトがキーボードで現在フォーカスされているかどうかを示すfocus状態と、セレクトが現在マウスでホバーされているかどうかを示すhover状態を公開します。

import { Select } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

function Example() {
  return (
    <Select name="status" as={Fragment}>
      {({ focus, hover }) => (
        <select className={clsx('border', focus && 'bg-blue-100', hover && 'shadow')} aria-label="Project status">
          <option value="active">Active</option>
          <option value="paused">Paused</option>
          <option value="delayed">Delayed</option>
          <option value="canceled">Canceled</option>
        </select>
      )}
    </Select>
  )
}

利用可能なすべてのレンダープロップスのリストについては、コンポーネントAPIを参照してください。

例

ラベルの追加

LabelとSelectをFieldコンポーネントでラップして、生成されたIDを使用して自動的に関連付けます。

import { Field, Label, Select } from '@headlessui/react'

function Example() {
  return (
    <Field>
      <Label>Project status</Label>
      <Select name="status">
        <option value="active">Active</option>
        <option value="paused">Paused</option>
        <option value="delayed">Delayed</option>
        <option value="canceled">Canceled</option>
      </Select>
    </Field>
  )
}

説明の追加

Field内でDescriptionコンポーネントを使用して、aria-describedby属性を使用してSelectに自動的に関連付けます。

import { Description, Field, Label, Select } from '@headlessui/react'

function Example() {
  return (
    <Field>
      <Label>Project status</Label>
      <Description>This will be visible to clients on the project.</Description>
      <Select name="status">
        <option value="active">Active</option>
        <option value="paused">Paused</option>
        <option value="delayed">Delayed</option>
        <option value="canceled">Canceled</option>
      </Select>
    </Field>
  )
}

セレクトの無効化

Fieldコンポーネントにdisabledプロップを追加して、Selectとその関連付けられたLabelおよびDescriptionを無効にします。

import { Description, Field, Label, Select } from '@headlessui/react'

function Example() {
  return (
    <Field disabled>
      <Label className="data-[disabled]:opacity-50">Project status</Label>
      <Description className="data-[disabled]:opacity-50">This will be visible to clients on the project.</Description>
      <Select name="status" className="data-[disabled]:bg-gray-100">
        <option value="active">Active</option>
        <option value="paused">Paused</option>
        <option value="delayed">Delayed</option>
        <option value="canceled">Canceled</option>
      </Select>
    </Field>
  )
}

Select自体に disabled プロップを直接追加することで、Fieldの外でセレクトを無効にすることもできます。

コンポーネントAPI

セレクト

ネイティブのselect要素を薄くラップします。

フィールド

ラベル

説明