Textarea 多行输入框

多行文本输入框。

import { Textarea } from '@hina-ui/react'

export default function Demo() {
  return (
    <Textarea
      defaultValue="转学第一天，我在天台遇见了那个抱着旧相机的少女。她说这台相机拍得到明天。"
      aria-label="作品简介"
      autosize
      className="w-full max-w-md"
    />
  )
}

tsx

用法

import { Textarea } from '@hina-ui/react'

多行文本输入框渲染为原生 textarea，value / onValueChange 绑定文本。默认高度为三行，右下角可以纵向拉伸。未声明的属性都会传给 textarea，placeholder、maxLength、name 等属性照常可用。

import { Textarea } from '@hina-ui/react'

export default function Demo() {
  return (
    <Textarea
      defaultValue=""
      aria-label="评论"
      placeholder="输入评论"
      className="w-full max-w-md"
    />
  )
}

tsx

示例

自动高度

设置 autosize 后高度随内容增减，拉伸把手隐藏。传入对象可以限定行数范围，超过 maxRows 后内部滚动。

import { Stack, Textarea } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      <Textarea defaultValue="" aria-label="不限行数" autosize placeholder="随内容增高，不限行数" />
      <Textarea
        defaultValue=""
        aria-label="两到五行"
        autosize={{ minRows: 2, maxRows: 5 }}
        placeholder="最少两行，最多五行，超出后在框内滚动"
      />
    </Stack>
  )
}

tsx

尺寸

三档尺寸与输入框相同，只有一行内容时高度与同档输入框一致。

import { Stack, Textarea } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      <Textarea size="sm" rows={1} aria-label="小号" placeholder="小号" />
      <Textarea size="md" rows={1} aria-label="中号" placeholder="中号" />
      <Textarea size="lg" rows={1} aria-label="大号" placeholder="大号" />
    </Stack>
  )
}

tsx

形态

primary 带边框、背景与阴影；secondary 使用浅色背景；bare 背景透明，不绘制边框、阴影、悬停底色或容器聚焦环，尺寸与内边距仍由原有设置控制。

bare 保留禁用状态与 aria-invalid；错误信息可由 FormField 显示。

import { Textarea, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      <Textarea variant="primary" aria-label="primary" placeholder="primary" />
      <Textarea variant="secondary" aria-label="secondary" placeholder="secondary" />
      <Textarea variant="bare" aria-label="bare" placeholder="bare" />
    </Stack>
  )
}

tsx

状态

invalid 标出校验未通过，disabled 不可编辑。

import { Stack, Textarea } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      <Textarea invalid aria-label="校验未通过" defaultValue="简介不能少于二十个字。" />
      <Textarea disabled aria-label="已禁用" defaultValue="审核期间不能修改简介。" />
    </Stack>
  )
}

tsx

在表单中

放进 FormField 后，标签通过 htmlFor 指向文本域，说明与错误信息由字段渲染并关联到它；校验规则与提交交给 Form。

'use client'

import { useState } from 'react'
import * as v from 'valibot'
import { Button, Form, FormField, Text, Textarea } from '@hina-ui/react'

const schema = v.object({
  review: v.pipe(
    v.string('请写下评价'),
    v.trim(),
    v.minLength(20, '评价至少 20 个字'),
    v.maxLength(500, '评价不超过 500 个字'),
  ),
})

export default function Demo() {
  const [values, setValues] = useState({ review: '' })
  const [saved, setSaved] = useState(false)

  async function save() {
    await new Promise(resolve => setTimeout(resolve, 600))
    setSaved(true)
  }

  return (
    <Form values={values} rules={schema} className="w-80" onSubmit={save}>
      {({ submitting }) => (
        <>
          <FormField name="review" label="评价" description="20 到 500 个字" required>
            <Textarea
              value={values.review}
              onValueChange={review => setValues({ ...values, review })}
            />
          </FormField>
          <Button type="submit" loading={submitting} className="self-start">
            发表
          </Button>
          {saved && (
            <Text tone="muted" size="sm">
              评价已发表。
            </Text>
          )}
        </>
      )}
    </Form>
  )
}

tsx

行为

悬停、聚焦、错误与禁用的表现与 Input 相同。
自动高度在输入与 value / onValueChange 变化时重新计算，行数下限默认取 rows。
内容超出可见行数时在框内滚动，滚动条与 ScrollArea 相同。
点击框内文字之外的空白也会聚焦。

API

Props

属性	类型	默认值	说明
`variant`	`'primary' \| 'secondary' \| 'bare'`	`'primary'`	形态
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`rows`	`number`	`3`	行数
`autosize`	`boolean \| { minRows?: number; maxRows?: number }`	`false`	是否随内容调整高度
`resize`	`'none' \| 'vertical'`	`'vertical'`	是否可以拉伸，自动高度时不可拉伸
`invalid`	`boolean`	`false`	是否校验未通过
`disabled`	`boolean`	`false`	是否禁用
`className`	`string`	—	追加至根元素的类名

回调	参数	说明
`onValueChange`	`value: string`	文本变化

Ref

input 暴露原生 HTMLTextAreaElement，可读取选区或调用 setSelectionRange()；focus() 聚焦输入框且不滚动页面。仅在客户端挂载后可用。

用法

示例

自动高度

尺寸

形态

状态

在表单中

行为

无障碍

API

Props

Ref