InforSelectables@1.1.14.css

<infor-select-search id="search" name="search" class="form-control" placeholder="Selecteer status">
    <infor-select-option data-name="Actielijst" data-value="actielijst" data-selected>Actielijst</infor-select-option>
    <infor-select-option data-name="Lopend" data-value="lopend">Lopend</infor-select-option>
</infor-select-search>

Select Multiple

<infor-select-multiple id="multiple" name="multiple" class="form-control" placeholder="Selecteer status">
    <infor-select-option data-name="Actielijst" data-value="actielijst">Actielijst</infor-select-option>
    <infor-select-option data-name="Lopend" data-value="lopend">Lopend</infor-select-option>
</infor-select-multiple>

Select Edit

<infor-select-edit id="edit" name="edit" class="form-control rounded-pill" placeholder="Selecteer status">
    <infor-select-option data-value="actielijst" >Actielijst</infor-select-option>
    <infor-select-option data-value="lopend">Lopend</infor-select-option>
</infor-select-edit>

Options

Attribute	Description	Select	Multiple	Edit
id	Instance identifier	X	X	X
name	Input name attribute	X	X	X
placeholder	Input placeholder attribute	X	X	X
class	Input styling classes	X	X	X
data-value	Prefill a value			X
data-livewire	Trigger Livewire.emit on change	X	X	X
data-livewire-params	Optional additional livewire.emit params. Format = ":id=5 :name=TEST"	X	X	X
option data-name	Name that will be display on select	X	X
option data-value	Value that will posted	X	X	X
option data-selected	Pre-selects an option	X	X

Additional hidden input attributes

Place this div inside <infor-select-search>, all attributes will be appended to the hidden input

<infor-select-search-hidden-attr wire:model="role"></infor-select-search-hidden-attr>

Instance

Select Search

Use _inforSelectSearch.get(id) to get the instance

Variable	Parameters	Description
onchange()	`value: string/int`	Triggers on change with selected value as parameter, can be changed like this `instance.onchange = value => { console.log(value) }`
getValue()		Returns currently selected value: `{name: "Displayed name", value: "Hidden value"}`
setValue()	`value: string/int`	Sets values based on the provided parameter

Select Multiple

Use _inforSelectMultiple.get(id) to get the instance

Variable	Parameters	Description
onchange()	`values: object[]`	Triggers on change with selected values as parameter, can be changed like this `instance.onchange = values => { console.log(values) }`
onchangeOption()	`value: object`	Triggers on change with selected value as parameter, can be changed like this `instance.onchangeOption = value => { console.log(value) }`
getValues()		Returns currently selected options in an array: `[{name: "Actielijst", value: "actielijst"}]`
setValues()	`values: array, deselect: boolean`	Sets values based on the provided array. Deselects not included options based on deselect parameter, deselects by default

Select Edit

Use _inforSelectMultiple.get(id) to get the instance

Variable	Parameters	Description
onchange()	`value: string/int`	Triggers on change with selected value as parameter, can be changed like this `instance.onchange = value => { console.log(value) }`
getValue()		Returns currently selected value: `{name: "Displayed name", value: "Hidden value"}`
setValue()	`value: string/int`	Sets values based on the provided parameter