Simple select component
Features:
- Accepts handler function to apply selection by index
- Option to search by typing
- Display "no matches" when input doesn't match any options (if using search by typing)
- Clear text input on focus (favouring quick interaction) (if using search by typing)
- Close drawer + clear typed content on click away
- Automatically apply scroll if content exceeds max height
- Accepts indexes to exclude from list
- Accepts "sublabel" to display additional information under label of each option
- "No permanent selection" mode, which skips showing the selected item in the input
1import Select from '@tempoplatform/tpds/components/select'
2
3const [selectedIndex, setSelectedIndex] = React.useState(null)
4
5<Select
6 handleIndexSelection={setSelectedIndex}
7 selectedIndex={selectedIndex}
8 labelProp="label"
9 idProp="value"
10 excludeIndexes={[2]}
11 useKeyboard={true}
12 options={[
13 {
14 value: '1',
15 label: 'Option 1',
16 subLabel: 'Additional information about this item',
17 },
18 { value: '2', label: 'Option 2' },
19 { value: '3', label: 'Option 3' },
20 { value: '4', label: 'Option 4', subLabel: 'Additional information about this item' },
21 { value: '5', label: 'Option 5' },
22 ]}
23/>Prop Name
Type
Default
Required
Description
options
Array
null
yes
An array of items to select from
selectedIndex
Int
null
yes
The index to show as selected
enableClear
Boolean
false
no
Wether to show an "X" to clear the selected option
handleIndexSelection
Function
null
yes
The handler function used to select the clicked index
excludeIndexes
Array
[]
no
An array of indexes that will be excluded from the displayed options
noPermanentSelection
Boolean
false
no
Wether the input shows the clicked option or not
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
useKeyboard
Boolean
false
no
Pass true to allow searching by keyboard