文本区域

用于输入多行文本。

import { Textarea } from "@chakra-ui/react"

const Demo = () => {
  return <Textarea placeholder="Comment..." />
}

用法

¥Usage

import { Textarea } from "@chakra-ui/react"

<Textarea placeholder="..." />

示例

¥Examples

变量

¥Variants

使用 variant 属性更改文本区域的外观。

¥Use the variant prop to change the appearance of the textarea.

import { Stack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <Textarea variant="outline" placeholder="outline" />
      <Textarea variant="subtle" placeholder="subtle" />
      <Textarea variant="flushed" placeholder="flushed" />
    </Stack>
  )
}

尺寸

¥Sizes

使用 size 属性更改文本区域的大小。

¥Use the size prop to change the size of the textarea.

import { Stack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <Textarea size="xs" placeholder="XSmall size" />
      <Textarea size="sm" placeholder="Small size" />
      <Textarea size="md" placeholder="Medium size" />
      <Textarea size="lg" placeholder="Large size" />
      <Textarea size="xl" placeholder="XLarge size" />
    </Stack>
  )
}

辅助文本

¥Helper Text

将文本区域与 Field 组件配对以添加帮助文本。

¥Pair the textarea with the Field component to add helper text.

Comment Max 500 characters.

import { Field, HStack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack gap="10" width="full">
      <Field.Root required>
        <Field.Label>
          Comment <Field.RequiredIndicator />
        </Field.Label>
        <Textarea placeholder="Start typing..." variant="subtle" />
        <Field.HelperText>Max 500 characters.</Field.HelperText>
      </Field.Root>
      <Field.Root required>
        <Field.Label>
          Comment <Field.RequiredIndicator />
        </Field.Label>
        <Textarea placeholder="Start typing..." variant="outline" />
        <Field.HelperText>Max 500 characters.</Field.HelperText>
      </Field.Root>
    </HStack>
  )
}

错误文本

¥Error Text

将文本区域与 Field 组件配对以添加错误文本。

¥Pair the textarea with the Field component to add error text.

Comment Field is required

import { Field, HStack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack gap="10" width="full">
      <Field.Root invalid>
        <Field.Label>
          Comment <Field.RequiredIndicator />
        </Field.Label>
        <Textarea placeholder="Start typing..." variant="subtle" />
        <Field.ErrorText>Field is required</Field.ErrorText>
      </Field.Root>
      <Field.Root invalid>
        <Field.Label>
          Comment <Field.RequiredIndicator />
        </Field.Label>
        <Textarea placeholder="Start typing..." variant="outline" />
        <Field.ErrorText>Field is required</Field.ErrorText>
      </Field.Root>
    </HStack>
  )
}

字段

¥Field

使用 Field 组件编写文本区域，添加标签、帮助文本和错误文本。

¥Compose the textarea with the Field component to add a label, helper text, and error text.

import { Field, HStack, Input } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack gap="10" width="full">
      <Field.Root required>
        <Field.Label>
          Email <Field.RequiredIndicator />
        </Field.Label>
        <Input placeholder="me@example.com" variant="subtle" />
      </Field.Root>
      <Field.Root required>
        <Field.Label>
          Email <Field.RequiredIndicator />
        </Field.Label>
        <Input placeholder="me@example.com" variant="outline" />
      </Field.Root>
    </HStack>
  )
}

钩子表单

¥Hook Form

以下是如何将文本区域与 react-hook-form 集成的示例。

¥Here's an example of how to integrate the textarea with react-hook-form.

"use client"

import { Button, Field, Input, Stack, Textarea } from "@chakra-ui/react"
import { useForm } from "react-hook-form"

interface FormValues {
  username: string
  bio: string
}

const Demo = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>()

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start" maxW="sm">
        <Field.Root invalid={!!errors.username}>
          <Field.Label>Username</Field.Label>
          <Input
            placeholder="@username"
            {...register("username", { required: "Username is required" })}
          />
          <Field.ErrorText>{errors.username?.message}</Field.ErrorText>
        </Field.Root>

        <Field.Root invalid={!!errors.bio}>
          <Field.Label>Profile bio</Field.Label>
          <Textarea
            placeholder="I am ..."
            {...register("bio", { required: "Bio is required" })}
          />
          <Field.HelperText>A short description of yourself</Field.HelperText>
          <Field.ErrorText>{errors.bio?.message}</Field.ErrorText>
        </Field.Root>
        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

调整大小

¥Resize

使用 resize 属性控制文本区域的大小调整行为。

¥Use the resize prop to control the resize behavior of the textarea.

import { Stack, Textarea } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4" maxWidth="250px">
      <Textarea resize="none" placeholder="Search the docs…" />
      <Textarea resize="vertical" placeholder="Search the docs…" />
      <Textarea resize="horizontal" placeholder="Search the docs…" />
      <Textarea resize="both" placeholder="Search the docs…" />
    </Stack>
  )
}

要限制文本区域的最大高度（或行数），我们建议使用 maxHeight 属性并将其值设置为 lh 单位。

¥To limit the maximum height (or rows) of the textarea, we recommend using the maxHeight prop and setting the value to a lh unit.

<Textarea autoresize maxH="5lh" />

自动调整大小

¥Autoresize

使用 autoresize 属性使文本区域在你输入时自动垂直调整大小。

¥Use the autoresize prop to make the textarea autoresize vertically as you type.

import { Textarea } from "@chakra-ui/react"

const Demo = () => {
  return <Textarea autoresize />
}

参考

¥Ref

以下是如何访问底层元素引用的示例

¥Here's how to access the underlying element reference

const Demo = () => {
  const ref = useRef<HTMLTextAreaElement | null>(null)
  return <Textarea ref={ref} />
}

属性

¥Props

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` The size of the component
`variant`	`'outline'`	`'outline' \| 'subtle' \| 'flushed'` The variant of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

滑块

组合框

文本区域

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法