输入框

一个轻量级的原生输入元素包装器，它处理繁琐的无障碍问题，并为悬停和焦点等内容提供更具意见性的状态。

要开始使用，请通过 npm 安装无状态 UI

npm install @headlessui/react

输入框使用 Input 组件构建

import { Input } from '@headlessui/react'

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

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

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

但由于组件是无状态的，并且在开箱即用时完全没有样式，因此您无法在 UI 中看到此信息，直到您自己为每个状态提供所需的样式。

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

例如，Input 组件公开了 data-focus 属性，该属性告诉您输入当前是否通过鼠标或键盘处于焦点，以及 data-hover 属性，该属性告诉您输入当前是否被鼠标悬停。

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

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

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 以获取所有可用数据属性的列表。

每个组件还通过 渲染 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>
  )
}

查看 组件 API 以获取所有可用渲染 props 的列表。

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

将 disabled prop 添加到 Field 组件以禁用 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 外部的输入框。

原生 input 元素的薄包装器。

属性默认值描述
asinput
字符串 | 组件

元素或组件，input应该渲染为。

invalidfalse
布尔值

是否input无效。

disabledfalse
布尔值

是否input被禁用.

autoFocusfalse
布尔值

是否input在首次渲染时应接收焦点。

数据属性渲染属性描述
data-invalidinvalid

布尔值

是否input无效。

data-disableddisabled

布尔值

是否input被禁用。

data-focusfocus

布尔值

是否input处于焦点。

data-hoverhover

布尔值

是否input被悬停。

data-autofocusautofocus

布尔值

autoFocus 属性是否设置为 true。

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

属性默认值描述
asdiv
字符串 | 组件

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

disabledfalse
布尔值

字段是否被禁用。

数据属性渲染属性描述
data-disableddisabled

布尔值

字段是否被禁用。

Label 组件标记表单控件。

属性默认值描述
aslabel
字符串 | 组件

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

passivefalse
布尔值

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

数据属性渲染属性描述
data-disableddisabled

布尔值

父 Field 是否被禁用。

Description 组件描述表单控件。

属性默认值描述
asp
字符串 | 组件

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

数据属性渲染属性描述
data-disableddisabled

布尔值

父 Field 是否被禁用。

如果您对预先设计的 Tailwind CSS 表单输入组示例 感兴趣，请查看 Tailwind UI - 我们精心设计的美丽组件集合。

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

探索 示例 →

Various components from Tailwind UI