欄位集

安裝

要開始，請透過 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 以取得所有可用資料屬性的清單。

使用 render props

每個元件也會透過 render props 公開其目前狀態的資訊，您可以使用這些資訊有條件地套用不同的樣式或呈現不同的內容。

例如，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 以取得所有可用 render props 的清單。

範例

停用欄位集合

將 disabled 屬性新增至 Fieldset 元件，以停用整個欄位集合

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

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

元件 API

欄位集合

用標題將一組表單控制項群組在一起。

圖例

欄位集合 的標題。