文本区域

显示表单文本区域或外观类似文本区域的组件。

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

export function TextareaDemo() {

安装


pnpm dlx shadcn@latest add textarea

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

<Textarea />

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

import {
  Field,
  FieldDescription,

使用 disabled 属性禁用文本区域。要设置禁用状态的样式，请将 data-disabled 属性添加到 Field 组件。

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

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

import {
  Field,
  FieldDescription,

与 Button 搭配使用，创建带有提交按钮的文本区域。

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

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

"use client"

import * as React from "react"