Text area - Montage

Anatomy

1. Heading
2. Placeholder
3. Leading content
4. Description
5. Required badge
6. Field
7. Trailing content

Variants

Heading*

0/2000

Description

States

Resize

Normal

필드 내부의 텍스트 양과 비례하여 필드의 높이가 제한 없이 아래로 늘어납니다.

Limited

기본 높이에서 필드 내부의 텍스트 양과 비례하며 일정 높이까지 필드가 늘어나다가 고정됩니다. 필드의 최대 높이가 지정되어 있으며 iOS는 ‘높이’ 기준, Android, Web은 ‘글 줄'로 소통합니다. 단, 프로젝트 정책에 따라 최대 높이를 사용자가 직접 지정할 수 있습니다.

Default max height

iOS: 102px/Android: 3줄/Web: 12줄

Fixed

사용자의 의도에 따라 텍스트 양에 관계 없이 필드의 기본, 최대 높이를 자유롭게 고정하여 사용할 수 있습니다. 단, Textfield와의 구분을 위해 Textarea의 최소 권장 높이를 지켜가며 디자인합니다.

Min height

iOS: 76px/Android: 2줄/Web: 2줄

Bottom

Leading contents

Charactor counter, Text button, Icon button, Icon, Content badge, Filter button이 자리할 수 있습니다. 고정된 요소들만 들어갈 수 있으며 다른 요소가 들어갈 경우 커스터마이징하여 사용할 수 있습니다. Leading contents는 메인 영역 이외에 2개의 Extra가 존재하며 간격을 자유롭게 조절할 수 있습니다.

Trailing contents

Bottom 영역은 비활성할 수 있으며, Charactor counter, Text button(Primary, Assistive), Icon button(Normal, Solid), Icon, Content badge, Filter button이 위치합니다. 다른 요소가 들어갈 경우 커스터마이징할 수 있습니다. Trailing contents는 메인 영역 이외에 2개의 Extra가 존재하며 요소끼리의 간격을 2배수로 자유롭게 조절할 수 있습니다.

Validation icon

입력한 내용이 유효하지 않을 때 Validation icon이 노출됩니다. 단, Trailing contents가 있는 경우엔 제외합니다.

Keyboard sticky

키보드와 함께 사용하는 타입으로 필드의 최대 높이는 기본 5줄 이하로 권장합니다.

How to use

Do

Bottom의 Contents는 인터랙션 영역을 고려하여 간격을 조절합니다.

Don’t

모바일에서 높이가 지속적으로 늘어나는 Resize=Normal 타입을 사용하여 사용성 혼란을 주지 않습니다.