Text field
일정 높이의 필드 안에 한 줄 이하의 값을 입력할 수 있는 컴포넌트로 Heading, Placeholder, Description 등의 요소를 활용하여 사용자가 입력할 내용의 형식을 보다 명확하게 안내합니다.
- 1. Heading
- 2. Placeholder
- 3. Description
- 4. Leading icon
- 5. Field
- 6. Required badge
- 7. Trailing contents
- 8. Trailing button
휴대전화 번호 입력 시 4자 단위로 하이픈(-)이 포함된 형식을 사용하는 것을 권장합니다. 컴포넌트 자체 지원이 아닌 각
프로젝트 담당자들간의 커뮤니케이션으로 적용 가능합니다.
카드번호 16자 입력 시 4자 단위로 하이픈(-)이 포함된 형식을 사용하는 것을 권장합니다. 컴포넌트 자체 지원이 아닌 각 프로젝트 담당자들간의 커뮤니케이션으로 적용가능합니다.
필드 간의 간격은 기본적으로 Description의 활성 여부와 관계없이 동일한 간격을 유지합니다. 단, 레이아웃이 제한적인 상황일 경우 필드가 고정으로 위치하여 Description 만큼 간격이 줄어들 수 있습니다.
Trailing button을 활성하여 사용하며 인증번호 입력 필드가 노출 될 때 포커스가 이동합니다. 행동을 유도하는 발송, 재발송과 같은 특정 행동을 유도하는 버튼은 Normal을 사용하며 행동을 종료하는 ‘확인’은 Assistive를 권장합니다. 일정 시간 이후 필드의 버튼과 타이머가 비활성화 됩니다.
