Label
폼 요소를 위한 라벨 컴포넌트
개요
설치
사용법
Label과 Input을 import하여 사용합니다. htmlFor와 id로 라벨과 입력 요소를 연결합니다.
Label vs FormLabel
HANUI는 두 가지 라벨 컴포넌트를 제공합니다. 각각의 용도와 차이점을 이해하고 상황에 맞게 사용하세요.
| 구분 | Label | FormLabel |
|---|---|---|
| 용도 | 독립적인 폼 필드 라벨 | FormField 컨텍스트 내에서 사용 |
| 연결 방식 | htmlFor prop으로 수동 연결 | FormField의 id로 자동 연결 |
| 필수 표시 | 직접 구현 필요 | FormField의 required로 자동 표시 |
| 접근성 | aria 속성 수동 관리 | aria 속성 자동 연결 |
| 사용 시기 | 간단한 폼, 체크박스/라디오 그룹, FormField 미사용 시 | 복잡한 폼, 에러 처리 필요 시, 일관된 폼 UX 제공 시 |
Label 사용 예제
간단한 폼이나 FormField 통합이 필요 없을 때 사용합니다.
FormLabel 사용 예제 (권장)
FormField와 함께 사용하면 접근성과 에러 처리가 자동으로 연결됩니다.
예제
크기
size prop으로 라벨의 크기를 조절합니다.
필수 필드 표시
필수 입력 항목임을 시각적으로 표시합니다.
체크박스 & 라디오
체크박스와 라디오 버튼의 라벨로 사용합니다.
접근성
Label은 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- label 태그 사용: 스크린 리더가 폼 요소를 정확히 식별합니다.
- htmlFor 연결: 입력 요소와 명시적으로 연결됩니다.
- 에러 메시지는
aria-describedby를 사용하여 입력 필드와 연결하세요 - 클릭 영역: 라벨 클릭 시 연결된 입력 요소에 포커스가 이동합니다.
- 필수 필드 표시: 시각적/의미적으로 명확히 표시됩니다.