Input
텍스트 입력 — leading/trailing 아이콘 슬롯과 invalid 상태. 포커스 링은 래퍼의 focus-within이 그립니다.
마지막 업데이트 2026-06-11
한눈에#
한 줄 텍스트 입력 — leading/trailing 아이콘 슬롯과 invalid 상태. 포커스 링은 래퍼의 :focus-within이 그립니다.
- 44px 단일
- 아이콘 슬롯
- invalid 상태
- focus-within 링
기본 — 이메일·이름·코드 같은 한 줄 텍스트
사용 시점#
한 줄 텍스트면 Input — 여러 줄이나 폼 배선이 필요하면 목적에 맞는 컴포넌트를 실물로 비교합니다.
플레이그라운드#
컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.
import { Input } from '@wds/ui-web';
<Input aria-label="입력" placeholder="내용을 입력하세요" />해부#
- height
- 44px
input.height - radius
- 10px
input.radius - border
- 1px
input.border - invalid
- error
input.border-invalid - focus
- focus-within
focus-ring
변형 — 아이콘 슬롯#
trailingIcon 슬롯에는 버튼(비밀번호 표시 토글 등) 같은 인터랙티브 요소를
넣을 수 있어 aria-hidden을 강제하지 않습니다.
크기#
높이는 input.height(= control.height-md, 44px) 단일입니다 — 폼 컨트롤
줄맞춤은 Button md와 자동으로 일치합니다. 3단 크기는 수요 발생 시 토큰
신설 기준(§4)에 따라 추가합니다.
상태#
- Focus — 래퍼
:focus-within이 primary 보더 + 18% 링을 그립니다 (클릭해 보세요) - Invalid —
input.border-invalid(=color.error) 보더 +aria-invalid="true"자동 부여
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
leadingIcon | ReactNode | — | 앞쪽 장식 아이콘 — aria-hidden 자동 |
trailingIcon | ReactNode | — | 뒤쪽 슬롯 — 인터랙티브 요소 허용(aria-hidden 미부여) |
invalid | boolean | false | 오류 상태 — 보더 색 + aria-invalid 부여 |
clearable | boolean | false | 값이 있을 때 비우기(×) 버튼 노출 — trailingIcon보다 우선. 제어/비제어 모두 onChange 발화 (ADR-012 B-P1) |
clearLabel | string | '지우기' | 비우기 버튼 접근 이름 |
…rest | InputHTMLAttributes | — | placeholder · value · onChange · disabled 등은 내부 input으로 전달 |
className은 래퍼(div)에 적용됩니다 — 폭 제어 등 레이아웃 조정용.
접근성#
- 라벨은 소비자 책임 — 외부
<label htmlFor>연결 또는aria-label부여 invalid시aria-invalid="true"가 자동 부여 — 오류 메시지는aria-describedby로 연결 권장- 포커스 링이 래퍼에 그려져 아이콘 포함 전체가 하나의 컨트롤로 인지됩니다
trailingIcon에 장식 아이콘을 넣을 때는 소비자가aria-hidden을 부여하고, 인터랙티브 컨트롤(비밀번호 토글 등)을 넣을 때는 자체aria-label을 부여하세요 — 슬롯이 양쪽을 다 허용하므로 컴포넌트가 강제하지 않습니다
토큰#
| 토큰 | 값 | 설명 |
|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| P3 신설 — invalid 상태 보더 | ||
| — | ||
| — |