03 · Components · 입력
텍스트에어리어Textarea
여러 줄 텍스트를 수집. 기본 4줄 높이에 세로 리사이즈 허용. 문자 수 제한이 있으면 카운터를 아래에 함께 두세요.
StableWCAG AA
기본
tsx
<label htmlFor="bio" className="mb-1.5 block text-[13px] font-medium">자기소개</label>
<Textarea id="bio" placeholder="짧게 소개해주세요." />미리보기
문자 수 카운터
최대 길이가 있으면 하단에 "현재/최대" 형태로 표시하세요. 80% 이상 찼을 때 경고 색으로 바꾸는 것이 보편적입니다.
tsx
<Textarea maxLength={200} defaultValue="안녕하세요, ..." />
<p className="text-right text-[12px] text-muted">42 / 200</p>미리보기
42 / 200
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 4 | 초기 보이는 줄 수. |
invalid | boolean | 오류 테두리 + aria-invalid. | |
maxLength | number | 입력 가능한 최대 문자 수. |