フィールドセット

インストール

まず、npm 経由で Headless UI をインストールします

npm install @headlessui/react

基本例

フォームコントロールのセットをタイトルでグループ化するには、Fieldset および Legend コンポーネントを使用します

import { Field, Fieldset, Input, Label, Legend, Select, Textarea } from '@headlessui/react'

function Example() {
  return (
    <Fieldset className="space-y-8">
      <Legend className="text-lg font-bold">Shipping details</Legend>
      <Field>
        <Label className="block">Street address</Label>
        <Input className="mt-1 block" name="address" />
      </Field>
      <Field>
        <Label className="block">Country</Label>
        <Select className="mt-1 block" name="country">
          <option>Canada</option>
          <option>Mexico</option>
          <option>United States</option>
        </Select>
      </Field>
      <Field>
        <Label className="block">Delivery notes</Label>
        <Textarea className="mt-1 block" name="notes" />
      </Field>
    </Fieldset>
  )
}

ネイティブの HTML <legend> 要素はスタイルを設定するのが難しいため、Legend コンポーネントは <div> としてレンダリングされます。<Fieldset> コンポーネントはネイティブの <fieldset> コンポーネントを使用します。

スタイリング

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

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

データ属性の使用

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

たとえば、Fieldset および Legend コンポーネントの両方が data-disabled 属性を公開しており、これによりフィールドセットが現在無効になっているかどうかを把握できます。

<!-- Rendered `Fieldset` and `Legend` -->
<fieldset aria-labelledby="..." disabled data-disabled>
  <div id="..." data-disabled>Shipping details</div>
  <!-- ... -->
</fieldset>

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

import { Fieldset, Legend } from '@headlessui/react'

function Example() {
  return (
    <Fieldset disabled className="space-y-8 data-[disabled]:opacity-50">
      <Legend className="text-lg font-bold">Shipping details</Legend>
      {/* ... */}
    </Fieldset>
  )
}

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

レンダープロップの使用

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

たとえば、Fieldset および Legend コンポーネントの両方が disabled 状態を公開しており、これによりフィールドセットが現在無効になっているかどうかを把握できます。

import { Fieldset, Legend } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

function Example() {
  return (
    <Fieldset disabled as={Fragment}>
      {({ disabled }) => (
        <div className={clsx('space-y-8', disabled && 'opacity-50')}>
          <Legend className="text-lg font-bold">Shipping details</Legend>
          {/* ... */}
        </div>
      )}
    </Fieldset>
  )
}

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

例

フィールドセットの無効化

Fieldset コンポーネントに disabled プロップを追加して、フィールドセット全体を無効にします

import { Fieldset, Legend } from '@headlessui/react'

function Example() {
  return (
    <Fieldset disabled>
      <Legend>Shipping details</Legend>
      {/* ... */}
    </Fieldset>
  )
}

コンポーネント API

フィールドセット

フォームコントロールのセットをタイトルでグループ化します。

凡例

Fieldset のタイトル。