文本域 (Textarea)

展示一个表单文本域或看起来像文本域的组件。

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, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

使用 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, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

配合 Button 使用，以创建一个带有提交按钮的文本域。

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

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

"use client"

import * as React from "react"

本页内容

在 Vercel 上部署你的 shadcn/ui 应用

OpenAI、Sonos、Adobe 等公司的信任之选。

Vercel 提供工具和基础设施，以规模化部署应用和功能。