import { Textarea } from "@chakra-ui/react"
const Demo = () => {
return <Textarea placeholder="Comment..." />
}
用法
import { Textarea } from "@chakra-ui/react"<Textarea placeholder="..." />示例
变体
使用 variant 属性来改变文本区域的外观。
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>
)
}
尺寸
使用 size 属性来改变文本区域的尺寸。
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>
)
}
辅助文本
将文本区域与 Field 组件配合使用以添加辅助文本。
最多500个字符。
最多500个字符。
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>
)
}
错误文本
将文本区域与 Field 组件配合使用以添加错误文本。
字段为必填项
字段为必填项
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 组件组合使用，以添加标签、辅助文本和错误文本。
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 表单
这是一个将文本区域与 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 属性来控制文本区域的调整大小行为。
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 单位。
<Textarea autoresize maxH="5lh" />自动调整大小
使用 autoresize 属性使文本区域在您输入时自动垂直调整大小。
import { Textarea } from "@chakra-ui/react"
const Demo = () => {
return <Textarea autoresize />
}
引用
以下是如何访问底层元素引用
const Demo = () => {
const ref = useRef<HTMLTextAreaElement | null>(null)
return <Textarea ref={ref} />
}属性
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'组件的尺寸 |
variant | 'outline' | 'outline' | 'subtle' | 'flushed'组件的变体 |