Label

입력 요소의 이름과 목적을 프로그램적으로 연결합니다.

목적

Label은 form control이 받는 값의 의미를 명확히 설명하고 사용자와 보조 기술이 같은 입력 맥락을 공유하게 한다. 짧은 이름을 통해 현재 입력과 다음 판단을 연결한다.

선택 기준

Input, Select 등 모든 form control의 programmatic label에 사용한다.
section 제목이나 일반 설명 text의 시각 스타일을 맞추는 용도로 사용하지 않는다.
label, 도움말, 오류 관계가 필요한 일반 form에서는 FormField composition을 우선한다.

구조

Label의 htmlFor와 control의 id를 동일하게 연결한다. control 위에 Label을 두고, 선택 전에 필요한 도움말과 입력 후 복구를 돕는 오류를 별도 요소로 배치한다. Checkbox나 Radio가 추가되기 전까지 Label을 임의의 clickable row로 확장하지 않는다.

변형과 크기

별도 variant나 size prop은 없다. 기본은 14px, medium weight, 한 줄 line-height를 사용한다. 연결된 peer control이 disabled일 때 cursor와 opacity가 바뀔 수 있도록 같은 구조 안에서 사용한다.

상태와 동작

Label을 선택하면 연결된 control에 focus가 이동하는 native 동작을 유지한다. Label 자체의 loading, error, required 상태는 없다. 필수 여부나 오류는 읽을 수 있는 문구와 control 속성으로 함께 전달한다.

콘텐츠

이름, 발행일, 검토 담당자처럼 값의 의미를 간결한 명사로 쓴다. 질문형 문장이 더 자연스러운 경우에도 한 form 안에서 문체를 일관되게 유지한다. 단위나 형식은 Label에 모두 넣기보다 도움말로 분리한다.

접근성

보이는 Label을 제공하는 것이 기본이다. htmlFor와 id 연결을 빠뜨리지 않는다. 필수 필드는 native required 또는 aria-required와 함께 사용하고 시각적 별표만으로 전달하지 않는다. Label 안에 unrelated action을 넣어 click target을 혼란스럽게 하지 않는다.

좁은 화면과 긴 콘텐츠

긴 Label이 control 너비를 밀지 않도록 좁은 화면에서는 위아래 배치를 사용한다. 의미를 잃는 약어보다 자연스러운 줄바꿈을 허용한다. Label이 여러 문장이 되면 이름과 도움말을 분리한다.

공개 API

Label: 기반 label 요소의 props와 className을 전달한다.

공개 variant나 size prop은 없다.

예제

import { Input, Label } from '@classum/dot-design-system/ui';

export function OwnerField() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="owner">검토 담당자</Label>
      <Input id="owner" name="owner" autoComplete="name" />
    </div>
  );
}

피해야 할 사용

placeholder만 두고 Label을 생략하지 않는다.
div나 heading의 글자 스타일을 맞추기 위해 Label을 사용하지 않는다.
htmlFor와 control id가 다른 상태로 두지 않는다.
필수 여부를 색이나 별표 하나로만 전달하지 않는다.
Label 문장 안에 Button이나 Link를 섞어 control focus 동작을 방해하지 않는다.

목적