Label

컨트롤의 라벨이에요. 라벨만 필요할 때 직접 써요. 도움말이나 오류 문구를 함께 둘 때는 Field를 써요.

사용 예시

연결하기

htmlFor와 id를 같은 값으로 맞추면 라벨을 눌렀을 때 Input으로 포커스가 이동해요.

닉네임

tsx

<div className="flex flex-col gap-tight">  <Label htmlFor="nickname">닉네임</Label>  <Input id="nickname" value={nickname} onChange={e => setNickname(e.target.value)} /></div><div className="flex items-center gap-2">  <Label htmlFor="nickname-row">닉네임</Label>  <Input id="nickname-row" value={nickname} onChange={e => setNickname(e.target.value)} className="w-40" /></div>

닉네임

권장

라벨이 늘 보여서 값을 입력한 뒤에도 Input의 용도를 알 수 있어요.

지양

placeholder는 값을 입력하면 사라져요.

tsx

<Field layout="inline">  <Checkbox />  <FieldLabel>약관 동의</FieldLabel></Field>

권장

Field로 감싸면 id를 직접 적지 않아도 라벨이 연결돼요.

tsx

<Checkbox /><Label>약관 동의</Label>

지양

htmlFor와 id가 없으면 라벨을 눌러도 체크되지 않고, 스크린 리더가 Checkbox의 이름을 읽지 못해요.

명세

이름
이름	값	기본
htmlFor	string	-
연결할 컨트롤의 id예요.
className	string	-