Multiple selection component
Features:
- Accepts handler function to update array selection of indexes
- Search by typing
- Clear text input on focus (to search freely)
- Close drawer + clear typed content on click away
- Automatically apply scroll if content exceeds max height
- Accepts indexes to exclude
- Optionally show only items that are not yet selected in drawer
- Option to "truncate" number of items shows in the input and resume the rest with "+(n)"
Option 1
Option 2
1import SelectMulti from '@tempoplatform/tpds/components/select-multi'
2
3const [selectedIndexes, setSelectedIndexes] = React.useState([0, 1])
4
5<SelectMulti
6 handleSelectionUpdate={setSelectedIndexes}
7 selectedIndexes={selectedIndexes}
8 labelProp="label"
9 idProp="value"
10 excludeIndexes={[2]}
11 options={[
12 { value: '1', label: 'Option 1' },
13 { value: '2', label: 'Option 2' },
14 { value: '3', label: 'Option 3' },
15 { value: '4', label: 'Option 4' },
16 { value: '5', label: 'Option 5' },
17 { value: '6', label: 'Option 6' },
18 { value: '7', label: 'Option 7' },
19 { value: '8', label: 'Option 8' },
20 { value: '9', label: 'Option 9' },
21 ]}
22/>Prop Name
Type
Default
Required
Description
options
Array
null
yes
An array of items to select from
selectedIndexes
Array
null
yes
The indexes to show as selected
handleSelectionUpdate
Function
null
yes
The handler function used to update the selected indexes
excludeIndexes
Array
[]
no
An array of indexes that will be excluded from the displayed options
labelProp
String
value
no
The property name that will be used to access the option's display label
idProp
String
null
no
The property name that will be used to identify the index of the selected option
placeholder
String
Select
no
The placeholder text that will be displayed when no option is selected
isInvalid
Boolean
false
no
Wether the input is invalid or not
omitSelectedInDropdown
Boolean
true
no
Wether to show selected items in the dropdown or not
truncateAfterNumItems
Number
-1
no
If set to a positive number, the input will only show that number os selected items and will truncate the rest with a +X label