Select

Showcase

Enter something

This is a helper message

<LnxSelect
    v-model="..." <-- Pass a reactive variable here to bind its value
    :options="[{'label':'Option 1','value':'option-1'},{'label':'Option 2','value':'option-2'},{'label':'Option 3','value':'option-3'}]"
    label-property="label"
    :search-placeholder-text="undefined"
    @update:modelValue="..." <-- Two way binding of the component
    @query="..." <-- When the input search is written
    @select="..." <-- When an option is selected
>
    Enter something

    <template #notFound>
        Nothing found
    </template>

    <template #error>
        This is an error message
    </template>

    <template #helper>
        This is a helper message
    </template>
</LnxSelect>

Props

v-model UBinds the value of the select to the reactive variable used as prop Default value: undefined

It has a modifier `convert` that converts the value with the convertFn prop before emitting it

options T[]The options to be shown in the select*Required

convertFn (option: T) => T | UFunction to convert the value before emitting it. It receives the option and must return the converted value Default value: undefined

labelProperty stringThe property of the option to be shown as a label Default value: ""

searchPlaceholderText stringThe placeholder text of the search input Default value: "Search..."

areOptionsAsync booleanIndicates if the options are loaded asynchronously Default value: false

loadingOptions booleanIndicates if the options are being loaded asynchronously at the moment Default value: false

isLoading booleanWhen loading, it is disabled and shows different content Default value: false

hasError booleanIndicates if it should show the error slot Default value: false

customValidity stringThe error message of the input. It is the default value for the `error` slot Default value: undefined