Components/Text Fields

Text Fields

1.0.026 Aug, 2021
Design/ContentsCompleted
CodeNot Started
텍스트 필드(Text Fields)는 사용자가 UI 상 텍스트 입력 및 확인 시 활용되는 컴포넌트입니다. 한 줄 입력인 텍스트 필드(Text Field)와 여러 줄 입력인 텍스트 영역(Text Area)으로 나뉩니다.
Text Fields

Components

Text Fields는 쓰임새에 따라 Text Field, Text Area 2가지로 분류합니다. Text Fields는 가장 기본적인 한줄 형 텍스트를 입력하며, 텍스트 영역은 한 줄 이상, 즉 문장형 텍스트를 입력하기 위한 컴포넌트입니다.

  • A
    A
  • B
    B
A. Text FieldB. Text Area

Text Field

Text Field는 가장 기본적인 텍스트 입력 및 수정하기 위한 컴포넌트로 쓰임새에 따라 세부 속성을 변경해 사용합니다. 세부 속성에 관한 자세한 내용은 Variants와 Table of Figma Properties를 참고합니다.

Text Field
Text Fields 기본 케이스인 2 lines-Large 적용 예시입니다.

Anatomy

Anatomy
1. Value(or Placeholder)2. Label text3. Clear Icon4. Helper text

Variants

LayoutLayout
Layout

레이아웃은 Label 기준으로 1 Line, 2 Lines를 분류합니다. 1 Line은 Label을 포함하며 모듈 내 텍스트 필드 단독일 경우 사용합니다. 2 Lines는 Label을 제외하며 모듈 내 텍스트 필드 2개 이상일 경우 사용합니다. 검색창은 일괄적으로 1 Line만 사용 가능합니다.

LayoutLayout
Size

사이즈는 Container 높이 기준 Large, Small을 분류합니다. 사이즈에 따라 폰트 크기, 패딩값에 차이가 있습니다.

IconIcon
Icon

명확한 피드백 및 액션이 필요할 경우 아이콘을 결합해 사용합니다. 체크 아이콘은 필드 내 입력값에 관한 True, False 기준에 관해 사용합니다. Clear 아이콘은 필드 내 검색어를 입력한 경우 필수적으로 사용합니다.

Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
Layout1 line, 2 lines2 lines
StatusEmpty, FilledEmpty
SizeLarge, SmallLarge
StateDefault, Active, Disabled, ErrorDefault

Usage Guidelines

Do : 레이블 우측 ‘선택’ 표시 필수

한 페이지에서 선택과 필수 Text Field가 동시 나열될 경우, 선택 입력이 필요한 레이블 우측에 ‘선택’을 우선 표시합니다.

Do : 레이블 우측 ‘선택’ 표시 필수
Don’t : 레이블 우측 ‘선택’과 필수 ‘*’ 중복 표시

한 페이지에서 선택과 필수 Text Field가 동시 나열될 경우, 선택 입력 외 필수 입력 폼에 중복 표시를 하지 않습니다.

Don’t : 레이블 우측 ‘선택’과 필수 ‘*’ 중복 표시
Do : 입력 추가 안내 시 Placeholder를 사용

Placeholder는 사용자가 입력해야 할 예시 및 글자 수 등을 안내합니다. 자세한 추가 안내 목적으로 ‘입력’을 결합해 선택적으로 사용합니다.

Do : 입력 추가 안내 시 Placeholder를 사용
Don’t : 입력 추가 안내 시 Helper text를 사용

Placeholder는 사용자가 입력해야 할 예시 및 글자 수 등을 안내하며, Helper text는 필드가 활성화될 시 Placeholder 외 정보 안내 시 사용합니다.

Don’t : 입력 추가 안내 시 Helper text를 사용
Do : Error Message 입력 오류 안내 시 ‘-하세요’ 사용

Error Message는 입력 오류 안내 시 사용하며, 이에 관한 메시지는 사용자에게 직접적인 행동(수정)을 요청으로 문장형 ‘-하세요’에 마침표를 찍어 사용합니다.

Do : Error Message 입력 오류 안내 시 ‘-하세요’ 사용
Don’t : Error Message 입력 오류 안내 시 ‘하기’ 사용

Error Message는 입력 오류 안내 시 사용하며, 사용자에 관한 직접 행동을 요구하므로 ‘-하세요’가 아닌 ‘하기’인 사용은 제한합니다.

Don’t : Error Message 입력 오류 안내 시 ‘하기’ 사용
Do : Text Field 2개 이상 사용 시 패딩값 8 고정 사용

Text Field 2개 이상을 동일한 y축으로 수직 사용 시 간격을 8로 고정해 사용합니다.

Do : Text Field 2개 이상 사용 시 패딩값 8 고정 사용
Do : Text Field 2개 이상 사용 시, 결합한 형태 사용

Text Field 2개 이상이 유사한, 밀접한 값으로 연관된 Text Field는 결합해 사용합니다. 대표적인 예시로 비밀번호-비밀번호 확인과 주소-상세주소, 예금주-계좌번호는 두 필드가 결합해 사용합니다.

Do : Text Field 2개 이상 사용 시, 결합한 형태 사용Do : Text Field 2개 이상 사용 시, 결합한 형태 사용

Spec

Size

Text Field의 폭은 최대는 디바이스 너비에서 마진을 제외한 값이며, 최소는 140(모바일 기준)입니다. 죄우 패딩값은 16으로 고정이며, 높이는 Large 56, Small 48로 고정됩니다.

SizeSize

Text Area

Text Area는 텍스트 영역은 한 줄 이상, 즉 여러 줄 텍스트를 입력하기 위한 컴포넌트입니다. 텍스트양이 넘을 경우 줄 바꿈 되어, 높이는 고정되고 커서가 필드 최하단에 도착 시 고정 높이에서 스크롤 됩니다.

Text Area
텍스트 영역 기본 케이스인 Overflow 예시입니다.

Anatomy

Anatomy
1. Value(or Placeholder)

Variants

Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
StatusEmpty, FilledEmpty
StateDefault, Active, Disabled, ErrorDefault

Usage Guidelines

Do : 레이블 우측 ‘선택’ 표시 필수

한 페이지에서 선택과 필수 Text Area가 동시 나열될 경우, 선택 입력이 필요한 레이블 우측에 ‘선택’을 우선 표시합니다.

Do : 레이블 우측 ‘선택’ 표시 필수

Spec

Size

Text Area의 폭은 최대는 디바이스 너비에서 마진을 제외한 값이며, 최소는 140(모바일 기준)입니다. 좌우 패딩은 16으로 고정이며, 높이는 Overflow 영역을 고려해 가변으로 사용합니다.

Size
담당자구경하@kykoo

이전글
Tabs
다음글
Thumbnails