Form control

입력 필드에 Label과 Message를 붙여 무엇을 입력해야 하는지 안내하는 컴포넌트입니다. Text field, Text area, Select와 같은 입력 필드를 감싸서 사용하며, 접근성 연결을 처리합니다.

Anatomy

1. Label
2. Required badge
3. Input
4. Message
5. Accessory

Size

Large, Medium 2가지 사이즈를 제공합니다. Form control의 사이즈에 따라 Label의 크기가 바뀌며, 내부 입력 필드도 같은
사이즈를 사용합니다.

Gap

필드 간의 간격은 기본적으로 Message의 활성 여부와 관계없이 동일한 간격을 유지합니다. 단, 레이아웃이 제한적인 상황일 경우 필드가 고정으로 위치하여 Message 만큼 간격이 줄어들 수 있습니다.

Validation check

값을 입력하고 확인 버튼을 눌러 유효성 검사를 실시하도록 설계하는 것을 권장합니다.

Label placement

Top

Label을 입력 필드 위에 배치합니다. 기본 배치입니다.

Leading

Label을 입력 필드 왼쪽에 배치합니다. Label은 입력 필드 첫 줄(Large 48, Medium 40)의 중앙에 맞추며, Text area처럼 입력 필드가 여러 줄이 되어도 첫 줄 기준을 유지합니다.

Usage

With input

Text field, Text area, Select 등 입력 필드를 Input 영역에 넣어 사용합니다.

Message

입력 필드 아래에 안내 문구가 필요할 때 사용합니다. Status에 따라 문구의 종류가 바뀝니다.

Helper text (Normal): 입력할 내용의 형식이나 조건을 안내합니다.
Error message: 입력한 값이 유효하지 않을 때 실패 사유를 안내합니다.
Success message: 입력한 값이 유효한지 확인되었을 때 결과를 안내합니다.

Form control group

Leading 배치의 Form control을 여러 개 쌓아 사용할 때는 Form control group으로 묶어 사용합니다.
가장 긴 Label에 맞춰 Label 너비가 통일되어, Label 길이가 달라도 입력 필드의 시작 위치가 같아집니다. 여러 화면에서 같은
너비를 써야 할 때는 Label 너비를 고정할 수 있습니다.

How to use

실패 사유를 명확하게 안내하여 사용자에게 명확한 행동을 유도합니다.

Don’t

Label을 한 줄이 넘도록 길게 쓰지 않습니다.