MazSelect - with "multiple" options
MazSelect is a standalone component that replaces the standard html input select with a beautiful design system. There are many options like multiple values, search text field, custom templates options, colors, sizes, disabled, loading, error, warning, valid states, error messages, and icons.
Basic usage
selectedValue:
Multiple
selectedValues:
Search
Use search
property to add a search input in the options list
TIP
You can use your own template to replace the empty icon when no results are found
View code
<MazSelect>
<template #no-results>
<div class="p-4 text-center">No result</div>
</template>
</MazSelect>
INFO
You can adjust the search results by using search-threshold
where 1 is a perfect match and 0 is a match with any character
<MazSelect :search-threshold="0.75" :options="[...]" />
Custom search function
You can provide your own search function to customize the search behavior
Opt Group
Group your options like a native optgroup
Disabled
Size
Custom template options
Customize the options list with your own template
Custom options model
By default, the options should be an array of { value: any, label: string }
If you want custom keys of these options, you can use:
option-value-key
to override the key of the value in your optionoption-label-key
to override the key of the label to show in the option listoption-input-value-key
to override the key of the value to show in the input
Example
Types
type ModelValueSimple = string | number | null | undefined | boolean
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
style | Style attribut of the component root element | HTMLAttributes['style'] | No | undefined |
class | Class attribut of the component root element | HTMLAttributes['class'] | No | undefined |
id | The id of the select | string | No | undefined |
label | The label of the select | string | No | undefined |
placeholder | The placeholder of the select | string | No | undefined |
model-value | The value of the select | Value | Value[] | No | undefined |
options | The options of the select | Option[] | Yes | undefined |
option-value-key | The key of the option value | string | No | 'value' |
option-label-key | The key of the option label | string | No | 'label' |
option-input-value-key | The key of the option input value | string | No | 'label' |
list-position | The position of the list (auto by default - will switch between bottom-start and top-start) | MazPopoverProps['position'] | No | undefined |
item-height | The height of the option list item | number | No | undefined |
max-list-height | The max height of the option list | number | No | 240 |
max-list-width | The max width of the option list | number | No | undefined |
min-list-height | The min height of the option list | number | No | undefined |
min-list-width | The min width of the option list | number | No | undefined |
size | The size of the select | MazSize | No | 'md' |
color | The color of the select | MazColor | No | 'primary' |
search | Display search input in option list | boolean | No | undefined |
search-function | Replace the default search function to provide a custom search function | TSFunctionType | No | undefined |
search-threshold | The threshold for the search input where 1 is a perfect match and 0 is a match with any character | number | No | 0.75 |
multiple | Enable the multiple selection | Multiple | No | undefined |
required | Make the input required in the form | boolean | No | undefined |
disabled | Disable the component | boolean | No | undefined |
block | The input will be displayed in full width | boolean | No | undefined |
autocomplete | The autocomplete attribute of the input | string | No | 'off' |
translations | The translations of the component | Partial<MazUiTranslationsNestedSchema['select']> | No | { searchPlaceholder: 'Search in options', } |
format-input-value | The function to format the input value | (value: Multiple extends true ? Value[] : Value) => string | No | undefined |
transition | The transition name of the panel list options | MazPopoverProps['transition'] | No | 'scale-fade' |
Events
Event name | Properties | Description |
---|---|---|
close | value Event - the event | On list is closed |
open | On list is opened | |
blur | value Event - the event | On input blur |
focus | value Event - the event | On input focus |
change | value Event - the event | On input change value |
input | value Event - the event | On input value |
update:model-value | value MazInputValue | MazInputValue[] - the new value | On model value update, returns the new value |
selected-option | value MazSelectOption - the option object | On selected value, returns the option object |
Slots
Name | Description | Bindings |
---|---|---|
left-icon | Add a custom left icon | is-open boolean - Current open state of the popoverclose function - Function to close the popoveropen function - Function to open the popovertoggle function - Function to toggle the popover |
right-icon | Add and replace a custom right icon | is-open boolean - Current open state of the popoverclose function - Function to close the popoveropen function - Function to open the popovertoggle function - Function to toggle the popover |
no-results | No results slot - Displayed when no results corresponding with search query | |
optgroup | Custom optgroup label | label String - the label of the optgroup |
default | Custom option | option Object - the option objectis-selected Boolean - if the option is selectedis-open Boolean - if the popover is openclose function - function to close the popoveropen function - function to open the popovertoggle function - function to toggle the popover |
Expose
open
Open the select
@description
This is used to open the list options
close
Close the select
@description
This is used to close the list options