Menu

사용자가 옵션을 선택할 수 있는 요소로 버튼, 셀렉트, 필터 칩 등 다양한 트리거 요소에서 호출됩니다. 단일 선택과 복수 선택을 모두 지원하며, 추가 액션을 위한 Action area를 포함할 수 있습니다.

Anatomy

  1. 1. Section header
  2. 2. List cell
  3. 3. Container
  4. 4. Action area

Variants

Variants
Action area
Cell padding

States

Size

Action area 유무에 관계없이 기본 400px의 고정 된 높이를 가지고 있습니다. 단, 내부 콘텐츠들의 높이가 400px을 초과하지 않을 경우 내부 콘텐츠에 맞게 높이 가 조정됩니다. 호출 요소와의 간격유지를 위해 8px의 상하 여백을 포함합니다.

Min and max

  • Width: 최소 140px, 최대 320px의 너비를 유지합니다.
  • Height: Action area 포함 여부와 관계 없이 최대 400px의 고정 높이를 가집니다.

Sticky title

일정 구간마다 섹션의 타이틀을 둘 수 있습니다. 이 때 타이틀은 스크롤 시 상단에 고정이 됩니다.

Leading contents

Leading contents는 기본적으로 ‘선택'하는 Checkbox, Radio와 같은 Control 요소들이 배치됩니다.

Trailing contents

Trailing contents는 Check icon, Badge, Value 등 항목의 상태를 표현하는 요소들이 배치 될 수 있습니다. 단, 다른 타입의 Trailing contents 요소를 함께 혼용하여 배치하는 것을 권장하지 않습니다.

Contents override

Trailing content에 사용자가 특정 요소를 주입할 경우 Check Icon 보다 우선 순위를 가집니다.

Usage

Single select - Normal

Normal은 별도 액션 없이 단일 아이템 선택 시 값이 바로 적용될 때 사용합니다. 선택한 값의 적용, 변동이 잦아도 문제가 없을 시 사용합니다. 선택된 값은 우측의 Check icon으로 표현합니다.

Single select - Radio

Radio는 단일 선택한 값을 사용자가 확인하고 비교적 신중하게 적용해야할 때 사용합니다.

Multiple select - Checkbox

Checkbox는 다중 아이템 선택 시 값을 사용자가 확인하고 비교적 신중하게 적용해야할 때 사용합니다.

How to use

Do

선택 가능 영역을 List cell 전체로 두어 사용성을 높입니다.

Don’t

선택할 값이 명확하게 보일 수 있도록 항목에 말줄임을 사용하지 않습니다.

© 2026 Wanted Lab, Inc.