Textarea

폼 textarea 또는 textarea처럼 보이는 컴포넌트를 표시합니다.

examples/krds/textarea-demo.tsx

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

export default function TextareaDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/textarea.json

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

<Textarea />

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

examples/krds/textarea-field.tsx

import {
  Field,
  FieldDescription,

disabled prop으로 textarea를 비활성화합니다. 비활성 상태 스타일은 Field 컴포넌트에 data-disabled 속성을 추가해 적용합니다.

examples/krds/textarea-disabled.tsx

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

aria-invalid prop으로 textarea를 invalid 상태로 표시합니다. invalid 상태 스타일은 Field 컴포넌트에 data-invalid 속성을 추가해 적용합니다.

examples/krds/textarea-invalid.tsx

import {
  Field,
  FieldDescription,

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

examples/krds/textarea-button.tsx

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

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/textarea-rtl.tsx

"use client"

import * as React from "react"