Menu


Components

Filter Select

Storybook

The FilterSelect component is used to create an interactive dropdown menu that allows the user to select an option from several predefined options in the application.



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

Usage

Use the FilterSelect component as shown below:

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

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

List Items

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

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

Selected Value

The prop selectedValue is used to provide a default value

1import { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    selectedValue="A"
5    listItems={{
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 { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    textApplyBtn="Apply Example"
5    listItems={{
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 { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    textResetBtn="Reset Example"
5    listItems={{
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 { FilterSelect } from 'dd360-ds'
2  
3<FilterSelect
4    width={250}
5    listItems={{
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
-
"listItems"*
Object
-
"selectedValue"
string
-
"textApplyBtn"
string
Apply
"textResetBtn"
string
Reset
"className"
string
-
"width"
Object
-
"onApply"*
function
null
Filter DateFilter Select Multi