Textarea
다양한 스타일을 지원하는 여러 줄 입력 필드 컴포넌트입니다. 자동 높이 조절 기능과 FormField 자동 통합을 제공합니다.
개요
Textarea는 여러 줄의 텍스트 입력에 사용됩니다. 자동 높이 조절, FormField 통합, 다양한 상태 표시를 지원합니다.
설치
사용법
Textarea 컴포넌트를 import하여 사용합니다. rows 속성으로 초기 높이를 설정할 수 있습니다.
예제
Variant
default(테두리)와 filled(배경) 스타일을 제공합니다.
자동 높이 조절 (Auto Resize)
autoResize prop을 사용하면 입력 내용에 따라 높이가 자동으로 조절됩니다. maxRows로 최대 높이를 제한할 수 있습니다.
Status (상태)
status prop으로 에러, 성공, 정보 상태를 시각적으로 표시합니다. 각 상태에 맞는 border 색상이 적용됩니다.
FormField와 함께 사용
FormField 컴포넌트와 함께 사용하면 레이블, 에러 메시지, 도움말이 자동으로 연결됩니다.
최소 10자 이상 작성해주세요
필수 입력 항목입니다
자유롭게 의견을 작성해주세요
접근성
WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
키보드 지원
| 키 | 동작 |
|---|---|
Tab | 입력 필드로 포커스 이동 |
Enter | 새 줄 추가 |
Escape | 입력 취소 (브라우저 기본 동작) |
ARIA 속성
aria-invalid: 에러 상태를 자동으로 전달aria-required: 필수 입력 표시 지원aria-describedby: 에러 메시지 및 도움말 연결- FormField와 함께 사용 시 모든 접근성 속성 자동 연결