Textarea

여러 줄의 텍스트를 입력하는 텍스트 영역 컴포넌트

개요

Textarea 컴포넌트는 네이티브 <textarea> 요소를 래핑하여 일관된 스타일과 크기를 제공합니다. field-sizing-content로 입력 내용에 따라 자동으로 높이가 조절됩니다.

주요 특징

• ✅ Sizes: xs, sm, md, lg, xl 5단계 크기
• ✅ 자동 높이: field-sizing-content로 콘텐츠에 맞게 높이 자동 조절
• ✅ 상태 지원: disabled, readOnly, aria-invalid 상태 스타일
• ✅ 접근성: 네이티브 <textarea> 기반
• ✅ 디자인 토큰: Input과 공유하는 테마 토큰 지원

Sizes

Textarea는 5가지 크기를 지원합니다. 기본값은 md입니다.

<Textarea size="xs" placeholder="Extra Small" />
<Textarea size="sm" placeholder="Small" />
<Textarea size="md" placeholder="Medium (기본)" />
<Textarea size="lg" placeholder="Large" />
<Textarea size="xl" placeholder="Extra Large" />

사용 예시

기본 사용

<Textarea placeholder="내용을 입력하세요" />

Label과 함께 사용

<Label htmlFor="message">메시지</Label>
<Textarea id="message" placeholder="메시지를 입력하세요" />

비활성 상태

<Textarea disabled placeholder="비활성 상태" />

읽기 전용

<Textarea readOnly defaultValue="읽기 전용 내용입니다." />

유효성 검증 에러

aria-invalid 속성으로 에러 상태를 표시합니다.

<Textarea aria-invalid placeholder="에러 상태" />

API Reference

Props

기본 사용법

import { Textarea } from "@vortex/ui-foundation"
 
<Textarea placeholder="내용을 입력하세요" />
<Textarea size="sm" placeholder="작은 크기" />
<Textarea disabled />
<Textarea readOnly defaultValue="읽기 전용" />

접근성

시맨틱 마크업

• 네이티브 <textarea> 요소 기반
• aria-invalid 속성으로 유효성 검증 에러 상태 전달
• 포커스 링 자동 적용 (focus-visible)

권장 사항

• ✅ Label과 함께 사용하여 접근성 보장 (htmlFor와 id 연결)
• ✅ 명확한 placeholder 텍스트 제공
• ✅ 에러 상태 시 aria-invalid 속성 사용
• ❌ placeholder만으로 라벨을 대체하지 않기

관련 컴포넌트

• Input: 한 줄 텍스트 입력
• Label: 라벨
• Field: 라벨, 설명, 에러를 포함하는 폼 필드 래퍼