125k

Textarea

PreviousNext

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

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

無効な状態

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

有効なメッセージを入力してください。

import {
  Field,
  FieldDescription,

ボタン

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

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

RTL

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

شاركنا أفكارك حول خدمتنا.

"use client"

import * as React from "react"