🔹 Description
To follow
...
A 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({ sampleSelectsampleMultiSelect: { id: 'sampleSelectsampleMultiSelect', type: 'multi-select', placeholder: 'Please select multiple 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>MULTI-SELECT</h4> <InputSelectionHandler config={formElement.sampleSelectsampleMultiSelect} customClass="multi-select-custom-class" onChanged={(e: any) => inputChangedHandler(e, 'sampleSelectsampleMultiSelect')} /> </> ) |
🔹 Multi- Select with Group Option
...
Code Block | ||
---|---|---|
| ||
let [formElement, setFormElement] = useStateuseState<IState['formElement']>({ sampleSelectGroupOptionsampleMultiSelectGroupOption: { id: 'sampleSelectGroupOptionsampleMultiSelectGroupOption', type: 'multi-select', placeholder: 'Please select multiple 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<h4>MULTI-SELECT GROUP OPTIONS</h4> <InputSelectionHandler config={formElement.sampleSelectGroupOptionsampleMultiSelectGroupOption} customClass="multi-select-group-options-custom-class" onChanged={(e: any) => inputChangedHandler(e, 'sampleSelectGroupOptionsampleMultiSelectGroupOption')} /> </> ) |
🔹 Properties
Parent Parameter | Sub Parameter | Data Type | Constraint |
---|---|---|---|
config | JSON Object | Required | |
id | String | Required | |
type | String | Required | |
label | String | Optional | |
valueString | Array Object | Required | |
placeholder | String | Optional | |
maxLengthreadOnly | IntegerBoolean | Optional | |
readOnlyrequired | Boolean | OptionalBoolean | |
requireddisabled | Boolean | OptionalBoolean | |
options | Array Object | Required | |
info | JSON Object | String | Optional | |
customClass | String | Optional | |
onChanged | Event Method | Required |
...