Label
입력 요소의 목적을 짧게 설명합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/field.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
Field 밖에서 native 입력과 명시적으로 연결할 때 씁니다.
사용하지 않을 때
설명 문구나 시각 장식만을 위해 label 요소를 쓰지 않습니다.
변형과 상태
default고정 예시레이블 선택 시 연결된 입력으로 초점이 이동하는지 확인합니다.
required고정 예시FieldLabel의 필수 표시가 텍스트 의미를 방해하지 않는지 확인합니다.
접근성
htmlFor와 입력 id를 같은 값으로 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
htmlFor | string | 아니요 | 연결할 컨트롤의 id입니다. |
children | ReactNode | 아니요 | 컨트롤을 설명하는 짧은 이름입니다. |
사용 예시
지원 importimport { Label } from "@/components/ui/field"
<>
<Label htmlFor="query">Search</Label>
<Input id="query" />
</>