Chip Filter

여러개의 옵션 중 하나를 선택할 수 있는 컴포넌트입니다.

구조도

  1. Root
  2. Label
  3. Prefix Icon
  4. Suffix Icon

컴포넌트 미리보기

옵션

Selection

Chip Filter는 selected, unselected 중 하나의 상태를 가질 수 있습니다.

Disabled

Disabled 상태는 Chip Filter가 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.

Icon

Prefix Icon으로 Label을 보조하기 위한 모노크롬 아이콘을 사용할 수 있습니다. Suffix Icon으로 Chevron을 사용해 칩 버튼의 상호작용을 강조할 수 있습니다. 동시 사용은 권장하지 않습니다.

옵션 테이블

속성기본값
is disabledtrue, falsefalse
prefix iconicon
suffix iconIcon

상호작용

터치 / 마우스

마우스 클릭 또는 터치로 Chip Filter와 상호작용할 수 있습니다.

키보드

Focus

Space 또는 Enter 키를 통해 Chip Filter의 액션을 실행시킬 수 있습니다.

가이드라인

Do / Don't


Do

유저가 빠르게 원하는 액션을 선택할 수 있도록 Label을 간결하고 명료하게 작성합니다.

Don't

불필요한 단어 사용을 지양합니다. Label은 1줄을 초과할 수 없습니다.

개발 현황