Textarea

폼 텍스트 영역 또는 텍스트 영역처럼 보이는 컴포넌트를 표시합니다.

import { Textarea } from "@chadcn/ui"

export function TextareaDemo() {
  return (
    <div className="w-full max-w-sm">
      <Textarea placeholder="여기에 메시지를 입력하세요." />
    </div>
  )
}

동작 방식

이 컴포넌트는 현재 shadcn/ui 원본과 동일합니다. Chad 동작은 곧 추가될 예정입니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.

pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import { Textarea } from "@chadcn/ui"

<Textarea />

준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

레이블 포함

Label과 함께 사용하여 레이블과 설명이 있는 텍스트 영역을 만듭니다.

메시지

메시지는 지원팀에게 전달됩니다.

import { Textarea } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function TextareaWithLabel() {
  return (
    <div className="w-full max-w-sm space-y-2">
      <Label htmlFor="message">메시지</Label>
      <Textarea id="message" placeholder="여기에 메시지를 입력하세요." />
      <p className="text-sm text-muted-foreground">
        메시지는 지원팀에게 전달됩니다.
      </p>
    </div>
  )
}

비활성화

disabled prop으로 텍스트 영역을 비활성화합니다.

import { Textarea } from "@chadcn/ui"

export function TextareaDisabled() {
  return (
    <div className="w-full max-w-sm">
      <Textarea placeholder="여기에 메시지를 입력하세요." disabled />
    </div>
  )
}

버튼 포함

Button과 함께 사용하여 전송 버튼이 있는 텍스트 영역을 만듭니다.

import { Textarea } from "@chadcn/ui"
import { Button } from "@chadcn/ui"

export function TextareaWithButton() {
  return (
    <div className="w-full max-w-sm space-y-2">
      <Textarea placeholder="여기에 메시지를 입력하세요." />
      <Button>메시지 보내기</Button>
    </div>
  )
}