Input
항상 보이는 라벨과 한 줄 입력, 도움말과 오류.
- 출시 화면에서 사용
개요
미리보기
예시
상태
비어 있음
입력됨
도움말
로그인과 알림에만 써요.오류
name@company.com 형식으로 입력해 주세요.필수
비활성
읽기 전용
가장 긴 문구 (es)
이 주소로는 가입할 수 없어요. 다른 주소를 써 주세요.
쓰임 예
이메일
앞 아이콘
이렇게 · 이렇게 하지 않기
- 이렇게 라벨은 항상 보이게 둔다. placeholder는 예시일 뿐 라벨이 아니다.
- 이렇게 첫 검증은 blur나 제출 때. 오류가 보인 뒤에는 입력마다 다시 검증해 고쳐지면 바로 지운다.
- 이렇게 하지 않기 “형식이 맞음”을 초록 체크로 표시하지 않는다. 형식 검사는 사실 확인이 아니다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | ReactNode | 이메일 | 항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다. |
hint? | ReactNode | | 상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음. |
error? | ReactNode | | 오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다. |
required? | boolean | false | required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음). |
disabled? | boolean | false | Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다. |
readOnly? | boolean | false | 초점을 받고 복사할 수 있지만 바꿀 수 없다. |
type? | 'text' | 'email' | 'url' | 'tel' | text | email이면 autocomplete="email" inputmode="email" autocapitalize="off" spellcheck=false를, tel이면 autocomplete="tel" inputmode="tel"을 기본으로 준다(국가가 있는 번호는 PhoneInput). 검색·비밀번호·숫자는 각 전용 컴포넌트. |
prefix? | ReactNode | none | 앞쪽 장식 아이콘(aria-hidden). 뒤쪽 슬롯은 공개하지 않는다. |
placeholder? | string | name@example.com | 기대하는 값의 예. 라벨을 대신하지 않는다. |
defaultValue? | string | | 비제어 초기값. 제어하려면 value + onChange(네이티브). |
ref | — | — | ref는 <input>으로 전달된다(제출 실패 시 초점 이동). |
| 그 밖의 속성 | — | — | name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다. |
접근성
키보드: Tab으로 이동. 라벨을 누르면 입력에 초점. 초점 링 2px.
- aria-describedby 순서는 도움말 → 오류. 오류가 있으면 aria-invalid="true".
- 오류는 alert로 알리지 않는다. 제출 실패 시 FormLayout이 첫 오류 필드로 초점을 옮긴다.
- 붙여넣기를 막지 않는다. 라벨 포함 행이 44px 이상이다.