@olundot/ui · Form

Label

컨트롤과 그룹 선택지에 접근 가능한 필드 이름을 부여하는 기본 컴포넌트입니다.

API
<Label htmlFor required> — 0.2.0 신규 primitive (Radix react-label)
용도
htmlFor(단일 control) · legend(group)
접근성 기준
1 visible label / control; 필수는 텍스트로도 표시

기본

interactive (htmlFor → Input focus forward · label 클릭 = input focus)
코드 보기tsx
import { Input, Label } from "@olundot/ui";

export function EmailField() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="email">이메일</Label>
      <Input id="email" name="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

필수

interactive (* 마커 자동 · aria-hidden · htmlFor 연결)

시험 카드의 학번 8자리.

코드 보기tsx
import { Input, Label } from "@olundot/ui";

export function RequiredField() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="sn" required>학번</Label>
      <Input id="sn" name="studentNumber" required placeholder="20260001" />
    </div>
  );
}

그룹 라벨

interactive (fieldset + legend · RadioCardGroup 라이브)
응시 방식
코드 보기tsx
import { formFieldLabelClassName } from "@olundot/ui";

// fieldset/legend 패턴은 <Label> 미지원 — legend는 별도 HTML 요소.
// formFieldLabelClassName alias는 0.3.0까지 유지 (1 cycle deprecation).
export function DeliveryFieldset() {
  return (
    <fieldset className="grid gap-2">
      <legend className={formFieldLabelClassName}>응시 방식</legend>
      <label className="flex items-center gap-2 text-sm">
        <input type="radio" name="m" value="live" defaultChecked /> 실시간
      </label>
      <label className="flex items-center gap-2 text-sm">
        <input type="radio" name="m" value="practice" /> 연습
      </label>
    </fieldset>
  );
}