InputArea 文本域

描述

提供你的项目详细信息

import { InputArea } from "@lark-ui/core";

export function InputAreaBasicDemo() {
  return (
    <InputArea
      label="描述"
      placeholder="请输入描述…"
      description="提供你的项目详细信息"
    />
  );
}

安装

统一导出

import { InputArea } from "@lark-ui/core";

按需导出

import { InputArea } from "@lark-ui/core/components/input";

为了方便从其他库迁移，Textarea 也作为 InputArea 的别名一同导出。

用法

使用内置 Field（推荐）

使用 label 属性可启用内置的 Field 包装器，获得标签、描述和错误提示支持。

import { InputArea } from "@lark-ui/core";

export default function Example() {
  return (
    <InputArea
      label="Description"
      placeholder="Enter a description..."
      description="Provide details about your project"
    />
  );
}

裸用 InputArea（自定义布局）

在自定义表单布局中，请不要使用 label，直接使用 InputArea。出于无障碍考虑，必须提供 aria-label 或 aria-labelledby。

import { InputArea } from "@lark-ui/core";

export default function Example() {
  return <InputArea placeholder="Add notes..." aria-label="Notes" rows={3} />;
}

示例

带标签

个人简介

最多 500 个字符

import { InputArea } from "@lark-ui/core";

export function InputAreaWithLabelDemo() {
  return (
    <InputArea
      label="个人简介"
      placeholder="介绍一下你自己"
      description="最多 500 个字符"
    />
  );
}

自定义行数

使用 rows 属性控制初始高度。

2 行

4 行（默认）

8 行

import { InputArea } from "@lark-ui/core";

export function InputAreaRowsDemo() {
  return (
    <div className="flex flex-col gap-4">
      <InputArea label="2 行" placeholder="小区域" rows={2} />
      <InputArea label="4 行（默认）" placeholder="中等区域" rows={4} />
      <InputArea label="8 行" placeholder="大区域" rows={8} />
    </div>
  );
}

错误状态（字符串）

当 error 属性为真值时，会自动应用错误样式。

消息

消息至少需要 10 个字符

import { InputArea } from "@lark-ui/core";

export function InputAreaErrorStringDemo() {
  return (
    <InputArea
      label="消息"
      placeholder="请输入你的消息"
      value="你好"
      error="消息至少需要 10 个字符"
    />
  );
}

错误状态（对象）

使用带有 match 的错误对象进行约束校验。

反馈

import { InputArea } from "@lark-ui/core";

export function InputAreaErrorObjectDemo() {
  return (
    <InputArea
      label="反馈"
      value="不好"
      error={{
        message: "反馈至少需要 20 个字符",
        match: "tooShort",
      }}
      minLength={20}
    />
  );
}

尺寸

提供四种尺寸：xs、sm、base（默认）、lg。

极小

小

基础

大

import { InputArea } from "@lark-ui/core";

export function InputAreaSizesDemo() {
  return (
    <div className="flex flex-col gap-4">
      <InputArea size="xs" label="极小" placeholder="极小尺寸文本域" />
      <InputArea size="sm" label="小" placeholder="小尺寸文本域" />
      <InputArea label="基础" placeholder="基础尺寸文本域（默认）" />
      <InputArea size="lg" label="大" placeholder="大尺寸文本域" />
    </div>
  );
}

禁用

禁用字段

import { InputArea } from "@lark-ui/core";

export function InputAreaDisabledDemo() {
  return <InputArea label="禁用字段" placeholder="无法编辑" disabled />;
}

自动调整高度

使用 autoResize 可让文本域在用户输入或粘贴多行内容时自动纵向增长。minRows 设置最小高度，可选的 maxRows 限制最大高度——超出上限的内容将滚动显示。

配置值

根据内容高度自动调整，最多 8 行

import { InputArea } from "@lark-ui/core";

export function InputAreaAutoResizeDemo() {
  return (
    <InputArea
      label="配置值"
      defaultValue={"查看配置变更。\n\n在此添加后续说明。\n\n"}
      autoResize
      minRows={2}
      maxRows={8}
      description="根据内容高度自动调整，最多 8 行"
    />
  );
}

裸用 InputArea

不带 label 的 InputArea 会渲染为裸文本域。出于无障碍考虑，必须提供 aria-label。

import { InputArea } from "@lark-ui/core";

export function InputAreaBareDemo() {
  return <InputArea placeholder="添加备注…" aria-label="备注" rows={3} />;
}

可选字段

设置 required={false} 可在标签后显示”(optional)“文本。

补充说明(optional)

import { InputArea } from "@lark-ui/core";

export function InputAreaOptionalFieldDemo() {
  return (
    <InputArea label="补充说明" required={false} placeholder="任何补充信息…" />
  );
}

带工具提示的标签

使用 labelTooltip 可添加一个信息图标，悬停时显示补充说明。

Worker 脚本

import { InputArea } from "@lark-ui/core";

export function InputAreaLabelTooltipDemo() {
  return (
    <InputArea
      label="Worker 脚本"
      labelTooltip="在此输入你的 Lark 机器人脚本代码"
      placeholder="export default { async fetch(request) { ... } }"
      rows={4}
    />
  );
}

React 节点标签

label 属性接受 ReactNode，便于富文本格式化。

供审阅使用的备注

import { InputArea } from "@lark-ui/core";

export function InputAreaReactNodeLabelDemo() {
  return (
    <InputArea
      label={
        <span>
          供<strong>审阅</strong>使用的备注
        </span>
      }
      required
      placeholder="为审阅者添加备注…"
      rows={3}
    />
  );
}

API 参考

InputArea 接受所有标准 HTML textarea 属性，以及以下属性：

属性	类型	默认值	说明
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	输入框尺寸。 - `"xs"` — 适合紧凑界面的超小尺寸 - `"sm"` — 适合次要字段的小尺寸 - `"base"` — 默认尺寸 - `"lg"` — 适合突出字段的大尺寸
variant	`"default" \| "error"`	`"default"`	文本域的视觉变体。
label	`ReactNode`	-	文本域的标签内容（启用 Field 包裹层）——可以是字符串或任意 React 节点。
labelTooltip	`ReactNode`	-	通过信息图标显示在标签旁的工具提示内容。
description	`ReactNode`	-	显示在文本域下方的辅助说明文字。
error	`string \| { message: ReactNode; match: FieldErrorMatch }`	-	错误信息或校验错误对象。
autoResize	`boolean`	`false`	根据内容自动调整文本域高度。
minRows	`number`	`1`	启用 `autoResize` 时最少显示的行数。
maxRows	`number`	-	启用 `autoResize` 时最多扩展到的行数；超出部分将滚动显示。
onValueChange	`(value: string) => void`	-	每次变化时以新的字符串值触发回调。

无障碍

标签要求

InputArea 需要通过以下方式之一获得无障碍名称：

label 属性（推荐）
裸文本域使用 placeholder + aria-label
自定义标签关联使用 aria-labelledby

缺少无障碍名称会在开发模式下触发控制台警告。

错误关联

错误信息会通过 ARIA 属性自动与文本域关联，以便屏幕阅读器播报。