Label - OLUN. Design System

API: <Label htmlFor required>로 단일 컨트롤의 보이는 이름과 필수 마커를 연결합니다.
용도: 단일 컨트롤에는 htmlFor를, 그룹에는 legend 패턴을 사용합니다.
접근성 기준: 컨트롤 하나에는 보이는 라벨 하나를 연결하고, 필수 여부는 텍스트로도 드러냅니다.

기본

htmlFor와 입력 포커스 연결

이메일

코드 보기tsx

import { Input, Label } from "@olundot/ui";

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

필수

필수 마커와 htmlFor 연결

학번

시험 카드의 학번 8자리.

코드 보기tsx

import { Input, Label } from "@olundot/ui";

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

그룹 라벨

fieldset과 legend 그룹 라벨

응시 방식

실시간 연습

코드 보기tsx

import { formFieldLabelClassName } from "@olundot/ui";

// 그룹 선택지는 fieldset/legend로 이름을 제공합니다.
export function DeliveryFieldset() {
  return (
    <fieldset>
      <legend className={formFieldLabelClassName}>응시 방식</legend>
      <div className="mt-3 grid gap-1">
        <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>
      </div>
    </fieldset>
  );
}