Components

Label

Docs

API 사용가이드입니다. 연동·커스텀 프리뷰는 Overview를 참고하세요.

API

native label 속성을 그대로 받습니다. htmlFor로 컨트롤과 연결하거나, 컨트롤을 children으로 감쌀 수 있습니다. 시각 커스텀은 className · labelVariants로 합니다.

import { Label, labelVariants } from "@/components/label";
import { Input } from "@/components/input";

{/* htmlFor 연결 */}
<Label htmlFor="email">이메일</Label>
<Input id="email" type="email" />

{/* 감싸기 */}
<Label className="flex items-center gap-2">
  <input type="checkbox" />
  마케팅 수신 수신
</Label>

{/* 타이포·색 커스텀 — 기본 text-sm · font-medium · text-text-default 대체 */}
<Label htmlFor="title" className="text-base font-semibold text-text-secondary">
  제목
</Label>

{/* native label + 동일 규칙 */}
<label className={labelVariants({ className: "text-xs text-text-tertiary" })}>
  보조 라벨
</label>

Props

Name	Type	Default	Description
`children`	`React.ReactNode`	—	레이블 문구 또는 감싼 컨트롤+문구.
`htmlFor`	`string`	—	연결할 컨트롤 id. native label의 htmlFor와 동일합니다.
`className`	`string`	—	추가 클래스. text-base · font-semibold 등이 있으면 기본 타이포를, text-text-secondary · text-[…] 등이 있으면 기본 색을 넣지 않습니다.
`labelVariants`	`(props?) => string`	—	스타일 함수. Label 없이 <label className={labelVariants(...)} /> 형태로 동일 규칙 적용.

Notes

소비 앱 필수: React 19, Tailwind CSS v4, ClaBi tokens.css(+ @theme 매핑), clsx.
clsx 패키지가 필수입니다. className 병합에 import { clsx } from "clsx" 를 사용합니다.
기본 시각은 FieldLabel과 동일합니다 (text-sm · font-medium · text-text-default · shrink-0).
Field 안에서는 FieldLabel을 권장합니다. FieldLabel은 내부적으로 Label을 사용합니다.
peer-disabled · has-[:disabled]로 비활성 컨트롤과 짝을 이룰 때 커서·색이 비활성으로 맞춰집니다.