文本区域

Textrea 组件允许您轻松创建多行文本输入.

安装

yarn add @chakra-ui/textarea

导入组件

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

基本用途

<Textarea defaultValue="This is a textarea" placeholder="A simple textarea" />

已禁用

通过 isDisabled 将文本区域置于禁用状态的道具

<Textarea isDisabled placeholder="A disabled textarea" />

无效

通过 isInvalid 将文本区域置于无效状态的道具

<Textarea isInvalid placeholder="An invalid textarea" />

大小

通过 size 更改文本区域大小的道具

<>
  <Textarea
    size="sm"
    placeholder="A sample placeholder"
    defaultValue="This is a small textarea"
  />
  <Textarea
    placeholder="A sample placeholder"
    defaultValue="This is a default textarea"
  />
  <Textarea
    size="lg"
    placeholder="A sample placeholder"
    defaultValue="This is a large textarea"
  />
</>

调整大小

通过 resize 将大小调整到垂直或水平的文本区域 方向

<Textarea placeholder="Here is a sample placeholder" resize="horizontal" />