Skip to content
Lenso UI

TextArea 多行文本框

原语级多行文本输入组件，可接受标准 HTML 属性。

用法

import { TextArea } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";
// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { TextArea } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";
const styles = stylex.create({ field: { width: 384, height: 128 } });export function Basic() {  return (    <TextArea      aria-label="Quick project update"      xstyle={styles.field}      placeholder="Share a quick project update..."    />  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

校验、标签与错误消息请参阅 TextField。

示例

变体

TextArea 组件支持两种视觉变体：

  • primary（默认）— 带阴影的标准样式，适用于大多数场景
  • secondary — 低强调、无阴影，适合在 Surface 等表面背景上使用

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { TextArea } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  root: { display: "flex", width: 280, flexDirection: "column", gap: 8 },});export function Variants() {  return (    <div {...stylex.props(styles.root)}>      <TextArea fullWidth placeholder="Primary textarea" variant="primary" />      <TextArea fullWidth placeholder="Secondary textarea" variant="secondary" />    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

表面样式

在 Surface 内使用时，请使用 variant="secondary"，以应用适合表面背景的低强调变体。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Surface, TextArea } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  root: { width: "100%", borderRadius: 24, padding: 24 },  field: { width: "100%", minWidth: 280 },});export function OnSurface() {  return (    <Surface xstyle={styles.root}>      <TextArea xstyle={styles.field} placeholder="Describe your product" variant="secondary" />    </Surface>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

宽度充满

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { TextArea } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ root: { width: 400 } });export function FullWidth() {  return (    <div {...stylex.props(styles.root)}>      <TextArea fullWidth placeholder="Full width textarea" />    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

受控组件

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Description, TextArea } from "@lenso/ui";import * as React from "react";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  root: { display: "flex", width: 384, flexDirection: "column", gap: 8 },});export function Controlled() {  const [value, setValue] = React.useState("");  return (    <div {...stylex.props(styles.root)}>      <TextArea        aria-describedby="textarea-controlled-description"        aria-label="Announcement"        placeholder="Compose an announcement..."        value={value}        onValueChange={setValue}      />      <Description id="textarea-controlled-description">        Characters: {value.length} / 280      </Description>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

行数与尺寸调整

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Label, TextArea } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  root: { display: "flex", width: 384, flexDirection: "column", gap: 16 },  field: { display: "flex", flexDirection: "column", gap: 8 },  resize: { resize: "vertical" },});export function Rows() {  return (    <div {...stylex.props(styles.root)}>      <div {...stylex.props(styles.field)}>        <Label htmlFor="textarea-rows-3">Short feedback</Label>        <TextArea          aria-label="Short feedback"          id="textarea-rows-3"          placeholder="This week's highlights..."          rows={3}        />      </div>      <div {...stylex.props(styles.field)}>        <Label htmlFor="textarea-rows-6">Detailed notes</Label>        <TextArea          aria-label="Detailed notes"          id="textarea-rows-6"          placeholder="Write out the full meeting notes..."          rows={6}          xstyle={styles.resize}        />      </div>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { TextArea } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  field: {    height: 112,    width: "100%",    maxWidth: 320,    fontSize: 14,    borderRadius: 12,    borderWidth: 1,    borderStyle: "solid",    borderColor: "color-mix(in oklab, var(--border) 80%, transparent)",    backgroundColor: "var(--surface)",    color: { default: "oklch(26.9% 0 0)", ':is(.dark *, [data-theme="dark"] *)': "oklch(97% 0 0)" },    boxShadow: {      default: "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 1px rgb(0 0 0 / .05)",      ":focus-visible": "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 2px oklch(70.8% 0 0 / .25)",      ':is(.dark *, [data-theme="dark"] *)':        "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 1px rgb(255 255 255 / .1)",      ':is(.dark *, [data-theme="dark"] *):focus-visible':        "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 2px oklch(55.6% 0 0 / .3)",    },    transitionProperty: "box-shadow, border-color",    transitionDuration: "150ms",    "::placeholder": {      color: {        default: "oklch(70.8% 0 0)",        ':is(.dark *, [data-theme="dark"] *)': "oklch(55.6% 0 0)",      },    },  },});export function CustomStyles() {  return <TextArea aria-label="Notes" xstyle={styles.field} placeholder="Add a note..." />;}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

@layer components {  .textarea {    @apply rounded-xl border border-border bg-surface px-4 py-3 text-sm leading-6 shadow-sm;
    &:hover,    &[data-hovered="true"] {      @apply bg-surface-secondary border-border/80;    }
    &:focus-visible,    &[data-focus-visible="true"] {      @apply border-accent ring-2 ring-accent/20;    }
    &[data-invalid="true"] {      @apply border-danger bg-danger-soft text-danger;    }  }}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

基础类 [!toc]

  • .textarea – 底层 <textarea> 元素样式

交互状态

  • 悬停：:hover 或 [data-hovered="true"]
  • 可见焦点：:focus-visible 或 [data-focus-visible="true"]
  • 无效：[data-invalid="true"]
  • 禁用：:disabled 或 [aria-disabled="true"]

API 参考

TextArea

TextArea 接受所有标准 HTML <textarea> 属性，以及以下属性：

Prop类型默认值描述
classNamestring-与基础样式合并的 Tailwind 类。
rowsnumber3可见文本行数。
colsnumber-文本控件的可见宽度。
valuestring-TextArea 的受控值。
defaultValuestring-非受控初始值。
onChange(event: React.ChangeEvent<HTMLTextAreaElement>) => void-变更处理函数。
placeholderstring-占位符文本。
disabledbooleanfalse禁用 TextArea。
readOnlybooleanfalse将 TextArea 设为只读。
requiredbooleanfalse将 TextArea 标记为必填。
namestring-表单提交时使用的 name。
autoCompletestring-浏览器自动完成提示。
maxLengthnumber-最大字符数。
minLengthnumber-最小字符数。
wrap'soft' | 'hard'-提交时文本如何换行。
fullWidthbooleanfalseTextArea 是否占满容器宽度
variant"primary" | "secondary""primary"组件的视觉变体。primary 为默认带阴影样式。secondary 为弱强调、无阴影变体，适合用于 surface 上。

对于 isInvalid、isRequired 等校验 prop 以及错误处理，请将 TextArea 作为子组件与 TextField 一起使用。

相关案例

See upstream TextArea showcases. Product showcases are not part of the local component runtime.

相关组件

TextField 文本输入框

便于组合的文本字段，包含标签、说明与内联校验。

Input 输入框

接受标准 HTML 属性的原生单行文本输入组件

Label 标签

渲染与表单控件关联的无障碍标签。