텍스트 영역
메모·설명·본문처럼 여러 줄 텍스트를 입력하는 필드다. Input 과 같은 시각 언어를 쓰며, 네이티브 textarea 속성을 그대로 전달한다. 높이는 rows 또는 className 으로 정하고, 사용자가 크기를 바꾸면 레이아웃이 깨질 수 있는 폼에서는 resize-none 을 권장한다.
상태
default
filled
disabled
활용 방법
기본
rows 로 기본 높이를 정한다. 폭은 className 으로 컨테이너에 맞춘다.
Preview
tsx
<Textarea rows={4} placeholder="설명을 입력하세요" className="w-full resize-none" />
긴 본문
본문 입력은 최소 높이를 크게 잡고, 필요하면 세로 resize 만 허용한다.
Preview
tsx
<Textarea placeholder="공지 내용을 입력하세요" className="min-h-32 w-full resize-y" />
사용 지침
- · 한 줄 입력은 Input 을 쓴다. 두 줄 이상 자유 입력이 필요할 때만 Textarea 를 쓴다.
- · 모달·테이블 안에서는 resize-none 을 기본으로 둬 레이아웃 흔들림을 막는다.
- · 긴 본문 편집기는 별도 에디터를 고려한다. Textarea 는 단순 텍스트 입력용이다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| rows | number | - | 기본 줄 수: 네이티브 textarea 속성 |
| className | string | "w-full" | 폭·높이·resize 등 레이아웃 조절 |
| ...props | TextareaHTMLAttributes | - | name·value·defaultValue·placeholder·required·disabled 등 전달 |