Textarea

フォームのテキストエリア、またはテキストエリアに似たコンポーネントを表示します。

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

aria-invalid プロパティを使用して、テキストエリアを無効としてマークします。無効な状態のスタイルを設定するには、data-invalid 属性を Field コンポーネントに追加します。

import {
  Field,
  FieldDescription,

Button と組み合わせて、送信ボタンのあるテキストエリアを作成します。

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

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

On This Page

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。