TextArea

여러 줄 텍스트 입력 필드예요.

사용법

기본

여러 줄 입력이 필요할 때 사용해요. label과 hint로 안내 문구를 붙일 수 있어요.

피드백

자유롭게 의견을 남겨주세요.

에러

error로 검증 실패 메시지를 표시해요.

설명

10자 이상 입력해주세요.

스타일 커스터마이징

TextArea 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<TextArea
  className="shadow-md"
  style={{
    --gtd-textarea-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<TextArea
  classNames={{
    root: "my-textarea-root",
    label: "my-textarea-label",
    input: "my-textarea-input",
    hint: "my-textarea-hint",
    error: "my-textarea-error"
  }}
/>

CSS 변수

변수	설명
--gtd-textarea-bg	입력 배경
--gtd-textarea-border-color	테두리색
--gtd-textarea-radius	모서리 반경

인터페이스

TextAreaProps

속성	타입	기본값	설명
label	string	—	접근성 레이블
hint	string	—	보조 설명
error	string	—	에러 메시지
rows	number	4	기본 행 수
classNames	Record<string, string>	—	슬롯별 클래스 (root, label, input 등)
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { TextArea } from "@/components/ui/TextArea";