多行文本框

一个围绕原生 textarea 元素的轻量级包装器，它处理繁琐的无障碍问题，并为悬停和焦点等状态提供更明确的样式。

要开始使用，请通过 npm 安装 Headless UI

npm install @headlessui/react

多行文本框使用 Textarea 组件构建

import { Textarea } from '@headlessui/react'

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

您可以将任何 props 传递给 Textarea，就像您通常传递给原生 textarea 元素一样。

Headless UI 会跟踪每个组件的许多状态，例如 textarea 是否处于焦点状态，弹出框是打开还是关闭，或者菜单中哪个项目当前通过键盘获得焦点。

但由于组件是无头且开箱即用，完全没有样式，所以您无法在 UI 中看到这些信息，除非您自己为每个状态提供所需的样式。

对 Headless UI 组件的不同状态进行样式设置最简单的方法是使用每个组件公开的 data-* 属性。

例如，Textarea 组件公开了一个 data-focus 属性，它告诉你 textarea 当前是否通过鼠标或键盘获得焦点，以及一个 data-hover 属性，它告诉你 textarea 当前是否被鼠标悬停。

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

使用 CSS 属性选择器 根据这些 data 属性的存在有条件地应用样式。如果您使用的是 Tailwind CSS，则 data 属性修饰符 使此操作变得容易。

import { Textarea } from '@headlessui/react'

function Example() {

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

请参阅 组件 API，了解所有可用 data 属性的列表。

每个组件还通过 render props 公开有关其当前状态的信息，您可以使用这些信息有条件地应用不同的样式或呈现不同的内容。

例如，Textarea 组件公开了一个 focus 状态，它告诉你 textarea 当前是否通过鼠标或键盘获得焦点，以及一个 hover 状态，它告诉你 textarea 当前是否被鼠标悬停。

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，了解所有可用 render props 的列表。

使用 Field 组件将 Label 和 Textarea 包装在一起，以使用生成的 ID 自动关联它们。

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

function Example() {
  return (

    <Field>
      <Label>Description</Label>
      <Textarea name="description"></Textarea>

    </Field>
  )
}

在 Field 中使用 Description 组件，以使用 aria-describedby 属性将其自动关联到 Textarea。

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>
  )
}

将 disabled prop 添加到 Field 组件以禁用 Textarea 及其关联的 Label 和 Description。

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>
  )
}

您也可以通过直接将 disabled prop 添加到 Textarea 本身来在 Field 之外禁用多行文本框。

一个围绕原生 textarea 元素的轻量级包装器。

Prop默认描述
astextarea
字符串 | 组件

元素或组件的textarea应该渲染为。

invalidfalse
布尔值

是否textarea无效。

disabledfalse
布尔值

是否textarea被禁用.

autoFocusfalse
布尔值

是否textarea在首次渲染时应该获得焦点。

Data 属性Render Prop描述
data-invalidinvalid

布尔值

是否textarea无效。

data-disableddisabled

布尔值

是否textarea被禁用。

data-focusfocus

布尔值

是否textarea处于焦点状态。

data-hoverhover

布尔值

是否textarea被悬停。

data-autofocusautofocus

布尔值

autoFocus prop 是否设置为 true。

将 Label、Description 和表单控件分组在一起。

Prop默认描述
asdiv
字符串 | 组件

元素或组件的field应该渲染为。

disabledfalse
布尔值

字段是否被禁用。

Data 属性Render Prop描述
data-disableddisabled

布尔值

字段是否被禁用。

Label 组件标记表单控件。

Prop默认描述
aslabel
字符串 | 组件

元素或组件的label应该渲染为。

passivefalse
布尔值

如果为 true，则单击标签不会使关联的表单控件获得焦点。

Data 属性Render Prop描述
data-disableddisabled

布尔值

父 Field 是否被禁用。

Description 组件描述表单控件。

Prop默认描述
asp
字符串 | 组件

元素或组件的description应该渲染为。

Data 属性Render Prop描述
data-disableddisabled

布尔值

父 Field 是否被禁用。

如果您有兴趣获得 Tailwind CSS 多行文本框示例 的预先设计样式，请查看 Tailwind UI — 这是我们构建的一组经过精心设计和制作的组件。

这是一个支持我们开源项目工作的绝佳方式，使我们能够改进这些项目并保持良好的维护。

探索更多预先设计示例 →

Various components from Tailwind UI