03 · Components · 입력
인풋Input
한 줄의 텍스트를 수집하는 가장 기본 컨트롤. 접두·접미 슬롯과 오류 상태, 3단계 크기를 제공합니다. 반드시 레이블을 연결해 사용하세요.
StableWCAG AA
기본
tsx
<label htmlFor="email" className="mb-1.5 block text-[13px] font-medium">이메일</label>
<Input id="email" type="email" placeholder="name@example.com" />미리보기
접두·접미
tsx
<Input leading={<User size={15} />} placeholder="사용자 이름" />
<Input trailing="원" type="number" placeholder="10000" />미리보기
원
오류 상태
tsx
<Input invalid defaultValue="잘못된 주소" />미리보기
이메일 형식으로 입력해주세요.
레이블 연결은 타협이 없습니다. 시각적으로 라벨을 숨기는 경우에도 <label>은 반드시 남겨두고 sr-only로만 가리세요. placeholder는 레이블을 대체하지 않습니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 높이 32 / 40 / 48px. |
invalid | boolean | 오류 테두리 + aria-invalid 부여. | |
leading | ReactNode | 왼쪽 슬롯 (아이콘·접두어). | |
trailing | ReactNode | 오른쪽 슬롯 (아이콘·단위). | |
type | "text" | "email" | "url" | "tel" | ... | "text" | 네이티브 input type. 모바일 키보드 최적화에 영향. |