FilterMultiSelect

Props

Prop	Type	Default	Description
label	string	-	라벨 텍스트
placeholder	string	-	플레이스 홀더
defaultValue	string	-	기본 선택 값
size	'medium' | 'small'	'medium'	사이즈
onChange	function	-	값 선택 핸들러
options	{ value: string label: string }[]	-	옵션 데이터 value: 선택 값 label: 라벨 값
variant	'default' | 'select' | 'checkbox' | 'toggle'	'select'	타입
showHeading	string	-	헤딩 텍스트 노출 여부
headingText	string	-	헤딩 텍스트
showButton	boolean	-	버튼 노출 여부
buttonText	string	-	버튼 텍스트
onButtonClick	function	-	버튼 클릭 이밴트 핸들러
accentColor	string	-	강조 색상
hoverColor	string	-	호버 색상
icon	React.ReactNode	-	라벨 아이콘
itemIcon	React.ReactNode	-	옵션 라벨 아이콘
description	string	-	설명글
maxDisplayValues	number	-	최대 노출할 선택 값 개수
showSearch	boolean	-	검색창 노출 여부

Usage

<FilterMultiSelect
  label={'라벨'}
  size={'large'}
  placeholder={'선택'}
  defaultValue={'value01'}
  onChange={() => {}}
  options={[
    {
      value: 'value01',
      label: '셀렉트 아이템',
    },
    {
      value: 'value02',
      label: '셀렉트 아이템',
    },
    {
      value: 'value03',
      label: '셀렉트 아이템',
    },
  ]}
  variant={'select'}
  showHeading
  headingText={'Heading'}
  showButton
  buttonText={'검색'}
  onButtonClick={() => {}}
  description={'보조적인 설명이 필요할 때 사용하는 헬퍼 메시지입니다.'}
  maxDisplayValues={3}
  showSearch
/>