Text area

필드 내부에 2줄 이상의 텍스트를 입력할 때 사용하며 Heading, Placeholder, Description등의 요소를 활용하여 사용자가 입력할 내용의 형식을 보다 명확하게 안내합니다.

Anatomy

1. Container
2. Placeholder
3. Leading content
4. Trailing content
5. Value

States

Size

Large, Medium 2가지 사이즈를 제공합니다. 너비는 자유롭게 지정할 수 있으며, 높이는 기본적으로 텍스트 2줄에 맞춰 정해집니다. Bottom 영역에 넣는 버튼·배지·아이콘은 필드 사이즈에 맞춰 크기가 정해집니다.

Resize

Normal

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

Limited

기본 높이에서 필드 내부의 텍스트 양에 비례하여 일정 높이까지 늘어나다가 고정되며, 이후에는 스크롤됩니다. 최대 높이는 플랫폼 모두 '줄 수' 기준으로 소통합니다. 단, 프로젝트 정책에 따라 최대 높이를 사용자가 직접 지정할 수 있습니다.

Default max height

6줄

Fixed

텍스트 양에 관계없이 필드의 높이를 고정하여 사용할 수 있으며, 고정한 높이를 넘는 텍스트는 스크롤됩니다. 단, Textfield와 구분되도록 최소 권장 높이 이상으로 지정합니다.

Min height

2줄

Bottom

Leading contents

슬롯 영역으로 원하는 요소를 배치할 수 있습니다. Icon, Icon button, Content badge, Segmented control은 기본 제공 요소로, 필드 사이즈에 맞춰 크기가 자동으로 정해집니다. Leading contents는 Bottom 영역 왼쪽 끝에 정렬되며, 요소 간 기본 간격은 Large 8px, Medium 6px이고 필요에 따라 조절할 수 있습니다.

Trailing contents

슬롯 영역으로 원하는 요소를 배치할 수 있습니다. Button, Icon, Icon button, Primary icon button, Content badge, Segmented control은 기본 제공 요소로, 필드 사이즈에 맞춰 크기가 자동으로 정해집니다. Trailing contents는 Bottom 영역 오른쪽 끝에 정렬되며, 요소 간 기본 간격은 Large 8px, Medium 6px이고 필요에 따라 조절할 수 있습니다.

How to use

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

Don’t

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