テキストエリア

インストール

はじめに、npm を介して Headless UI をインストールします。

npm install @headlessui/react

基本例

テキストエリアは`Textarea`コンポーネントを使用して構築されています。

import { Textarea } from '@headlessui/react'

function Example() {
  return <Textarea name="description"></Textarea>
}

ネイティブの`textarea`要素に通常渡すプロパティを`Textarea`に渡すことができます。

スタイル設定

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

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

データ属性の使用

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

たとえば、`Textarea`コンポーネントは`data-focus`属性を公開しており、これはテキストエリアが現在マウスまたはキーボードでフォーカスされているかどうかを示し、`data-hover`属性はテキストエリアが現在マウスでホバーされているかどうかを示します。

<!-- Rendered `Textarea` -->
<textarea name="description" data-focus data-hover></textarea>

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

import { Textarea } from '@headlessui/react'

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

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

レンダープロップの使用

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

たとえば、`Textarea`コンポーネントは`focus`状態を公開しており、これはテキストエリアが現在マウスまたはキーボードでフォーカスされているかどうかを示し、`hover`状態はテキストエリアが現在マウスでホバーされているかどうかを示します。

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

function Example() {
  return (
    <Textarea name="description" as={Fragment}>
      {({ focus, hover }) => (
        <textarea className={clsx('border', focus && 'bg-blue-100', hover && 'shadow')}></textarea>
      )}
    </Textarea>
  )
}

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

例

ラベルの追加

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

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

function Example() {
  return (
    <Field>
      <Label>Description</Label>
      <Textarea name="description"></Textarea>
    </Field>
  )
}

説明の追加

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

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

function Example() {
  return (
    <Field>
      <Label>Description</Label>
      <Description>Add any extra information about your event here.</Description>
      <Textarea name="description"></Textarea>
    </Field>
  )
}

テキストエリアの無効化

`Textarea`と関連付けられた`Label`と`Description`を無効にするには、`Field`コンポーネントに`disabled`プロパティを追加します。

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

function Example() {
  return (
    <Field disabled>
      <Label className="data-[disabled]:opacity-50">Name</Label>
      <Description className="data-[disabled]:opacity-50">Add any extra information about your event here.</Description>
      <Textarea name="description" className="data-[disabled]:bg-gray-100"></Textarea>
    </Field>
  )
}

`Field`の外側でテキストエリアを無効にするには、`disabled`プロパティを`Textarea`自体に直接追加することもできます。

コンポーネントAPI

Textarea

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

Field

Label

Description