Components
Label
Overview
Label은 native `<label>`과 동일하게 쓰는 폼 레이블 프리미티브입니다. 기본 스타일은 ClaBi의 디자인 시스템을 준수하고, 소비앱의 타이포·색은 className으로 자유롭게 덮습니다. Field 조합 안에서는 FieldLabel을, Field 밖·단독·커스텀 레이아웃에서는 Label 사용을 권장합니다.
htmlFor
Label.htmlFor ↔ 컨트롤 id로 연결합니다. native label과 동일한 접근성 패턴입니다.
- htmlFor레이블과 입력의 id를 짝지어 클릭·포커스를 연결합니다.
htmlFor
Wrap
컨트롤을 Label children으로 감쌉니다. htmlFor 없이도 클릭 영역이 레이블에 포함됩니다.
- Wrapcheckbox · radio 등 인라인 컨트롤에 자주 씁니다.
Wrap
className
className으로 타이포·색·레이아웃을 덮습니다. 기본 유틸과 충돌하지 않도록 오버라이드 시 기본 클래스를 생략합니다.
- text-base font-semibold text-text-secondary py-2Label 타이포를 강조한 예시
- border-border-primary border-b-2 py-2 Label 아래에 보더를 강조한 예시
폰트 강조
보더