Label

폼 컨트롤과 연결되는 텍스트 라벨 컴포넌트

개요

Label 컴포넌트는 HTML <label> 요소를 래핑하여 폼 컨트롤에 접근성 있는 라벨을 제공합니다. htmlFor 속성으로 입력 요소와 연결하며, 5단계 크기를 지원합니다.

주요 특징

• ✅ 시맨틱 HTML: 네이티브 <label> 요소 기반
• ✅ Sizes: xs, sm, md, lg, xl 5단계 크기
• ✅ 접근성: htmlFor로 폼 컨트롤과 자동 연결
• ✅ 비활성 상태: 연결된 컨트롤의 disabled 상태에 자동 반응
• ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

Label은 5가지 크기를 지원합니다. 기본값은 sm입니다.

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

사용 예시

Input과 함께 사용

htmlFor와 id로 라벨과 입력 요소를 연결합니다.

<Label htmlFor="email">이메일</Label>
<Input id="email" type="email" placeholder="user@example.com" />

Checkbox와 함께 사용

라벨을 클릭하면 연결된 체크박스가 토글됩니다.

<Checkbox id="agree" />
<Label htmlFor="agree">이용약관에 동의합니다</Label>

Switch와 함께 사용

<Switch id="darkmode" />
<Label htmlFor="darkmode">다크 모드</Label>

비활성 상태

연결된 컨트롤이 disabled이면 라벨도 자동으로 비활성 스타일이 적용됩니다.

<Checkbox id="disabled" disabled />
<Label htmlFor="disabled">비활성 옵션</Label>

API Reference

Props

기본 사용법

import { Label } from "@vortex/ui-foundation"
 
<Label htmlFor="name">이름</Label>
<Label size="lg" htmlFor="title">제목</Label>

접근성

시맨틱 마크업

• 네이티브 <label> 요소로 렌더링
• htmlFor 속성으로 폼 컨트롤과 자동 연결
• 라벨 클릭 시 연결된 컨트롤에 포커스 이동

권장 사항

• ✅ 모든 폼 컨트롤에 Label을 연결하여 접근성 보장
• ✅ htmlFor와 입력 요소의 id를 반드시 일치시키기
• ✅ 라벨 텍스트는 명확하고 간결하게 작성
• ❌ 시각적으로만 라벨을 숨기지 않기 (필요시 sr-only 클래스 사용)

관련 컴포넌트

• Input: 텍스트 입력 필드
• Checkbox: 체크박스
• Switch: 토글 스위치
• Field: 라벨, 설명, 에러를 포함하는 폼 필드 래퍼