컴포넌트 · 입력
TextField
한 줄 텍스트 · 숫자 입력 필드입니다. 라벨은 항상 필드 위에 두고, 도움말과 오류 메시지는 같은 자리에서 교체되어 레이아웃이 흔들리지 않게 합니다.
구조
영수증에 표시되는 이름이에요
0/20- 1
Label
caption1 Semibold, 필수는 * (빨강)
- 2
Field
1px 라인, 포커스 시 1.5px 브랜드 + 4px 링
- 3
Prefix / Suffix
아이콘 · 단위(원, %) · 버튼
- 4
Helper / Error
caption2, 오류 시 아이콘과 함께 교체
상태
사업자등록번호 10자리를 입력해 주세요
확인된 사업자예요
Prefix · Suffix
%
원
자동 포맷팅
사업자등록번호 · 전화번호 · 카드번호처럼 형식이 정해진 값은 입력 중 하이픈을 자동으로 넣고, 서버에는 숫자만 보냅니다.
숫자만 입력하면 자동으로 구분돼요
AmountField
송금 · 충전 · 환불 금액 입력. 큰 숫자 타이포와 빠른 금액 버튼으로 모바일에서 빠르게 입력합니다.
원
최대 128,400원까지 환불할 수 있어요
Textarea
200자 이내
0/200Size
사용 규칙
이렇게 하세요
- 라벨은 항상 표시 (placeholder로 대체 금지)
- 오류는 blur 시점에 검증, 수정 중엔 즉시 해제
- 숫자 입력에는 inputMode=numeric
이렇게 하지 마세요
- placeholder에 필수 정보 넣기
- 오류 메시지를 필드 아래가 아닌 토스트로만 표시
- 비밀번호 외 필드에서 붙여넣기 막기