Menu


Components

Filter Select Multi

Storybook

The FilterSelectMulti component allows users to select multiple options from a set of filters. Provides an interactive and easy-to-use interface to efficiently filter and organize data.



Imports
1import { FilterSelectMulti } from 'dd360-ds'

Usage

Use the FilterSelectMulti component as shown below:

The code snippet below shows how to use the FilterSelectMulti component:

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    initialItemList={{
5      A: {
6        label: 'Option A'
7      },
8      B: {
9        label: 'Option B'
10      }
11    }}
12    onApply={handleChange}
13/>
14

Initial Item List

The prop initialItemList it is used to show the available options, there is also the possibility of disabling one of them

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    initialItemList={{
5      A: {
6        label: 'Option A'
7      },
8      B: {
9        label: 'Option B',
10        disabled:true
11      }
12    }}
13    onApply={handleChange}
14/>
15

Title

The prop title serves to provide a descriptive title or label

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    title="Title Example"
5    initialItemList={{
6      A: {
7        label: 'Option A'
8      },
9      B: {
10        label: 'Option B'
11      }
12    }}
13    onApply={handleChange}
14/>
15


Text Apply Btn

The prop textApplyBtn it is used to customize the text of the apply button

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelectMulti
4    textApplyBtn="Apply Example"
5    initialItemList={{
6      A: {
7        label: 'Option A'
8      },
9      B: {
10        label: 'Option B'
11      }
12    }}
13    onApply={handleChange}
14/>
15

Text Reset Btn

The prop textResetBtn it is used to customize the text of the reset button

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelect
4    textResetBtn="Reset Example"
5    initialItemList={{
6      A: {
7        label: 'Option A'
8      },
9      B: {
10        label: 'Option B'
11      }
12    }}
13    onApply={handleChange}
14/>
15

Width

The prop width used to customize the size

1import { FilterSelectMulti } from 'dd360-ds'
2  
3<FilterSelect
4    width={250}
5    initialItemList={{
6      A: {
7        label: 'Option A'
8      },
9      B: {
10        label: 'Option B'
11      }
12    }}
13    onApply={handleChange}
14/>
15


API Reference
NameTypesDefault
"title"
string
-
"initialItemList"*
Object
-
"textApplyBtn"
string
Apply
"textResetBtn"
string
Reser
"className"
string
-
"width"
Object
-
"onApply"*
function
null
Filter SelectLanguage