文本区域

import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add textarea
Copy

用法

🌐 Usage

Copyimport { Textarea } from "@/components/ui/textarea"

Copy<Textarea />

示例

🌐 Examples

字段

🌐 Field

使用 Field、FieldLabel 和 FieldDescription 创建一个带有标签和描述的文本区域。

🌐 Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

已禁用

🌐 Disabled

使用 disabled 属性来禁用文本区域。要为禁用状态设置样式，请在 Field 组件上添加 data-disabled 属性。

🌐 Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

无效

🌐 Invalid

使用 aria-invalid 属性将文本区域标记为无效。要为无效状态添加样式，请将 data-invalid 属性添加到 Field 组件。

🌐 Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

按钮

🌐 Button

与 Button 配对以创建带有提交按钮的文本区域。

🌐 Pair with Button to create a textarea with a submit button.

import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"