Input

한 줄 텍스트를 입력받는 기본 텍스트 필드입니다.

데모

이메일 주소

계좌번호

코드

<div className="flex flex-col gap-1.5">
  <Label htmlFor="email">이메일 주소</Label>
  <Input id="email" type="email" placeholder="name@doksam.com" />
</div>
<div className="flex flex-col gap-1.5">
  <Label htmlFor="account">계좌번호</Label>
  <Input id="account" disabled defaultValue="012-345678-90" readOnly />
</div>

사용 규칙

Input에는 항상 연결된 Label을 htmlFor/id로 짝지어 접근성을 보장한다.
이메일·숫자 등 입력 형식에 맞는 type을 지정해 모바일 키보드까지 최적화한다.
수정 불가한 값은 disabled 또는 readOnly로 명확히 표시한다.

Don't

placeholder를 label 대신 사용해 값을 지운 뒤 의미가 사라지게 하지 않는다.
포커스 링 등 상태 스타일을 className으로 덮어써 접근성 신호를 제거하지 않는다.
너비를 임의 px로 고정해 반응형 레이아웃을 깨지 않는다.