Text Fields
Components
Text Fields는 쓰임새에 따라 Text Field, Text Area 2가지로 분류합니다. Text Fields는 가장 기본적인 한줄 형 텍스트를 입력하며, 텍스트 영역은 한 줄 이상, 즉 문장형 텍스트를 입력하기 위한 컴포넌트입니다.
- A
- B
Text Field
Text Field는 가장 기본적인 텍스트 입력 및 수정하기 위한 컴포넌트로 쓰임새에 따라 세부 속성을 변경해 사용합니다. 세부 속성에 관한 자세한 내용은 Variants와 Table of Figma Properties를 참고합니다.
Anatomy
Variants
Layout
레이아웃은 Label 기준으로 1 Line, 2 Lines를 분류합니다. 1 Line은 Label을 포함하며 모듈 내 텍스트 필드 단독일 경우 사용합니다. 2 Lines는 Label을 제외하며 모듈 내 텍스트 필드 2개 이상일 경우 사용합니다. 검색창은 일괄적으로 1 Line만 사용 가능합니다.
Size
사이즈는 Container 높이 기준 Large, Small을 분류합니다. 사이즈에 따라 폰트 크기, 패딩값에 차이가 있습니다.
Icon
명확한 피드백 및 액션이 필요할 경우 아이콘을 결합해 사용합니다. 체크 아이콘은 필드 내 입력값에 관한 True, False 기준에 관해 사용합니다. Clear 아이콘은 필드 내 검색어를 입력한 경우 필수적으로 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Layout | 1 line, 2 lines | 2 lines |
| Status | Empty, Filled | Empty |
| Size | Large, Small | Large |
| State | Default, Active, Disabled, Error | Default |
Usage Guidelines
Do : 레이블 우측 ‘선택’ 표시 필수
한 페이지에서 선택과 필수 Text Field가 동시 나열될 경우, 선택 입력이 필요한 레이블 우측에 ‘선택’을 우선 표시합니다.
Don’t : 레이블 우측 ‘선택’과 필수 ‘*’ 중복 표시
한 페이지에서 선택과 필수 Text Field가 동시 나열될 경우, 선택 입력 외 필수 입력 폼에 중복 표시를 하지 않습니다.
Do : 입력 추가 안내 시 Placeholder를 사용
Placeholder는 사용자가 입력해야 할 예시 및 글자 수 등을 안내합니다. 자세한 추가 안내 목적으로 ‘입력’을 결합해 선택적으로 사용합니다.
Don’t : 입력 추가 안내 시 Helper text를 사용
Placeholder는 사용자가 입력해야 할 예시 및 글자 수 등을 안내하며, Helper text는 필드가 활성화될 시 Placeholder 외 정보 안내 시 사용합니다.
Do : Error Message 입력 오류 안내 시 ‘-하세요’ 사용
Error Message는 입력 오류 안내 시 사용하며, 이에 관한 메시지는 사용자에게 직접적인 행동(수정)을 요청으로 문장형 ‘-하세요’에 마침표를 찍어 사용합니다.
Don’t : Error Message 입력 오류 안내 시 ‘하기’ 사용
Error Message는 입력 오류 안내 시 사용하며, 사용자에 관한 직접 행동을 요구하므로 ‘-하세요’가 아닌 ‘하기’인 사용은 제한합니다.
Do : Text Field 2개 이상 사용 시 패딩값 8 고정 사용
Text Field 2개 이상을 동일한 y축으로 수직 사용 시 간격을 8로 고정해 사용합니다.
Do : Text Field 2개 이상 사용 시, 결합한 형태 사용
Text Field 2개 이상이 유사한, 밀접한 값으로 연관된 Text Field는 결합해 사용합니다. 대표적인 예시로 비밀번호-비밀번호 확인과 주소-상세주소, 예금주-계좌번호는 두 필드가 결합해 사용합니다.
Spec
Size
Text Field의 폭은 최대는 디바이스 너비에서 마진을 제외한 값이며, 최소는 140(모바일 기준)입니다. 죄우 패딩값은 16으로 고정이며, 높이는 Large 56, Small 48로 고정됩니다.
Text Area
Text Area는 텍스트 영역은 한 줄 이상, 즉 여러 줄 텍스트를 입력하기 위한 컴포넌트입니다. 텍스트양이 넘을 경우 줄 바꿈 되어, 높이는 고정되고 커서가 필드 최하단에 도착 시 고정 높이에서 스크롤 됩니다.
Anatomy
Variants
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Status | Empty, Filled | Empty |
| State | Default, Active, Disabled, Error | Default |
Usage Guidelines
Do : 레이블 우측 ‘선택’ 표시 필수
한 페이지에서 선택과 필수 Text Area가 동시 나열될 경우, 선택 입력이 필요한 레이블 우측에 ‘선택’을 우선 표시합니다.
Spec
Size
Text Area의 폭은 최대는 디바이스 너비에서 마진을 제외한 값이며, 최소는 140(모바일 기준)입니다. 좌우 패딩은 16으로 고정이며, 높이는 Overflow 영역을 고려해 가변으로 사용합니다.
