🔹 Description
To followA component wherein a user can select specific item or items from a range of options.
...
🔹System Dependencies
...
| Code Block | ||
|---|---|---|
| ||
import { InputSelectionHandler} from 'empower-inputs';
let [formElement, setFormElement] = useState({
sampleSelect: {
id: 'sampleSelect',
type: 'select',
placeholder: 'Please select option',
value: '',
disabled: false,
required: true,
options: [
{
label: "Leave",
value: "file-leave",
},
{
label: "Overtime",
value: "file-overtime",
},
{
label: "DTR Amendment",
value: "file-amendment",
},
{
label: "Change Shift",
value: "view-shift-schedule",
}
]
}
});
..............
return (
<>
<h4>SELECT</h4>
<InputSelectionHandler
config={formElement.sampleSelect}
customClass="select-custom-class"
onChanged={(e) => inputChangedHandler(e, 'sampleSelect')}
/>
</>
) |
🔹 Select with Group Option
...
Configuration
| Code Block | ||
|---|---|---|
| ||
let [formElement, setFormElement] = useState({ sampleSelectGroupOption: { id: 'sampleSelectGroupOption', type: 'select', placeholder: 'Please select option', value: '', disabled: false, options: { 'sample-group-1': { label: 'Sample Group 1', options: [ { label: 'Option 1', value: 'option-1' }, { label: 'Option 2', value: 'option-2' }, ] }, 'sample-group-2': { label: 'Sample Group 2', options: [ { label: 'Option 3', value: 'option-3' }, { label: 'Option 4', value: 'option-4' }, ] }, 'sample-group-3': { label: 'Sample Group 2', options: [ { label: 'Option 5', value: 'option-5' }, { label: 'Option 6', value: 'option-6' }, ] } } } }); .............. return ( <> <h4>SELECT GROUP OPTIONS</h4> <InputSelectionHandler config={formElement.sampleSelectGroupOption} customClass="select-group-options-custom-class" onChanged={(e: any) => inputChangedHandler(e, 'sampleSelectGroupOption')} /> </> ) |
🔹 Properties
Parent Parameter | Sub Parameter | Data Type | Constraint | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config | JSON Object | Required | |||||||||||||
id | String | Required | |||||||||||||
type | String | Required | |||||||||||||
label | String | Optional | |||||||||||||
value | String | Required | |||||||||||||
placeholder | String | OptionalmaxLength | |||||||||||||
Integer | Optional | readOnly | Boolean | Optional | |||||||||||
required | Boolean | Optional | |||||||||||||
rowsdisabled | Boolean | RequiredOptional | |||||||||||||
colsoptions | BooleanArray Object | Required | |||||||||||||
allowedCharinfo | JSON Object | Optional | alphabet | Boolean | Optional | numeric | Boolean | Optional | space | Boolean | Optional | allowedSymbols | Array (String)| String | Optional | |
customClass | String | Optional | |||||||||||||
onChanged | Event Method | Required |
...