入力

インストール

開始するには、npmを使用してHeadless UIをインストールします。

npm install @headlessui/react

基本的な例

入力はInputコンポーネントを使用して構築されます。

import { Input } from '@headlessui/react'

function Example() {
  return <Input name="full_name" type="text" />
}

ネイティブのinput要素に通常渡すpropsは、Inputに渡すことができます。

スタイリング

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

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

data属性の使用

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

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

<!-- Rendered `Input` -->
<input type="text" name="full_name" data-focus data-hover />

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

import { Input } from '@headlessui/react'

function Example() {
  return <Input type="text" name="full_name" className="border data-[hover]:shadow data-[focus]:bg-blue-100" />
}

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

render propsの使用

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

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

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

function Example() {
  return (
    <Input type="text" name="full_name" as={Fragment}>
      {({ focus, hover }) => <input className={clsx('border', focus && 'bg-blue-100', hover && 'shadow')} />}
    </Input>
  )
}

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

例

ラベルの追加

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

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

function Example() {
  return (
    <Field>
      <Label>Name</Label>
      <Input name="full_name" />
    </Field>
  )
}

説明の追加

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

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

function Example() {
  return (
    <Field>
      <Label>Name</Label>
      <Description>Use your real name so people will recognize you.</Description>
      <Input name="full_name" />
    </Field>
  )
}

入力の無効化

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

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

function Example() {
  return (
    <Field disabled>
      <Label className="data-[disabled]:opacity-50">Name</Label>
      <Description className="data-[disabled]:opacity-50">Use your real name so people will recognize you.</Description>
      <Input name="full_name" className="data-[disabled]:bg-gray-100" />
    </Field>
  )
}

disabled propをInput自体に直接追加することで、Field外の入力を無効にすることもできます。

コンポーネントAPI

入力

ネイティブのinput要素を薄くラップしたものです。

フィールド

ラベル

説明