Textarea
여러 줄 텍스트 입력 — Input과 동일한 invalid·disabled 어휘. 자동 높이 없이 rows와 세로 리사이즈로 높이를 제어합니다.
마지막 업데이트 2026-06-11
한눈에#
여러 줄 텍스트 입력 — Input과 동일한 invalid·disabled 어휘. rows와 세로 리사이즈로 높이를 제어합니다.
- rows 제어
- 세로 리사이즈
- invalid 상태
- input 토큰 공유
기본 — rows 3
사용 시점#
여러 줄 본문이면 Textarea — 그 외에는 목적에 맞는 입력을 실물로 비교합니다.
플레이그라운드#
컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.
import { Textarea } from '@wds/ui-web';
<Textarea aria-label="메모" placeholder="내용을 입력하세요" />변형#
단일 변형입니다 — 초기 높이는 rows로 제어합니다(기본 3).
자동 높이는 없습니다 — 입력에 따라 늘어나는 textarea가 필요하면
AiChatInput을 사용하세요(채팅 전용).
사용자는 핸들로 세로 리사이즈할 수 있습니다(resize: vertical).
크기#
높이는 rows × line-height + 패딩으로 결정됩니다. 보더·라디우스·색은
Input과 동일한 input.* component 토큰을 소비해 폼 안에서 시각적으로
일치합니다.
상태#
- Focus — primary 보더 + 18% 링 (Input
:focus-within과 동일 어휘, 클릭해 보세요) - Invalid —
input.border-invalid(=color.error) 보더 +aria-invalid="true"자동 부여 - Disabled —
input.bg-disabled배경 + 리사이즈 비활성
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
invalid | boolean | false | 오류 상태 — 보더 색 + aria-invalid 부여 (Input과 동일 계약) |
rows | number | 3 | 초기 표시 줄 수 — 자동 높이 없음 |
…rest | TextareaHTMLAttributes | — | placeholder · value · onChange · disabled 등은 textarea로 전달 |
접근성#
- 라벨은 소비자 책임 — FormField로 감싸거나
aria-label을 부여하세요 invalid시aria-invalid="true"자동 부여 — 오류 메시지는aria-describedby로 연결(FormField가 자동 배선)- 포커스 링은 마우스 포커스에도 표시됩니다 — 텍스트 입력 관례
토큰#
Input과 동일한 input.* component 토큰을 소비합니다(미러 — 별도 토큰 신설
기준 §4 미충족).
| 토큰 | 값 | 설명 |
|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| P3 신설 — invalid 상태 보더 | ||
| — | ||
| — |