전체 카탈로그
Data InputSelector24 props

Multi Selector

A checkbox dropdown for selecting multiple values from a list. Selected items can display as a count, labels, or badges. Use it for filtering or when presenting a finite set of ...

공식 문서 열기
live previewData Input

Preview

Select all
Name
Owner
Status
Updated

Import

import {MultiSelector} from '@astryxdesign/core/MultiSelector';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

A checkbox dropdown for selecting multiple values from a list. Selected items can display as a count, labels, or badges. Use it for filtering or when presenting a finite set of ...

multiselectcheckboxdropdownmultipickerchecklistfacetfilter

Important props

changeAction(value: string[]) => void | Promise<void>optional
sizesm | md | lgoptional
triggerDisplaycount | labels | badgesoptional
status{type: error | warning | success, message?: string}optional

Theming targets

astryx-multi-selector

Best practices

  • DoUse for a moderate, finite set of options where multiple choices are needed.
  • DoEnable search filtering when the list exceeds ~15 options.
  • DoUse renderOption for custom option rows; the checkbox affordance remains owned by MultiSelector.
  • DoEnable select-all when most users will want all or nearly all options selected.