Skip to content

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:

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
html
<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

html
<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 option
  • option-label-key to override the key of the label to show in the option list
  • option-input-value-key to override the key of the value to show in the input

Example


Types

ts
type ModelValueSimple = string | number | null | undefined | boolean

Props

NameDescriptionTypeRequiredDefault
styleStyle attribut of the component root elementHTMLAttributes['style']Noundefined
classClass attribut of the component root elementHTMLAttributes['class']Noundefined
idThe id of the selectstringNoundefined
labelThe label of the selectstringNoundefined
placeholderThe placeholder of the selectstringNoundefined
model-valueThe value of the selectValue | Value[]Noundefined
optionsThe options of the selectOption[]Yesundefined
option-value-keyThe key of the option valuestringNo'value'
option-label-keyThe key of the option labelstringNo'label'
option-input-value-keyThe key of the option input valuestringNo'label'
list-positionThe position of the list (auto by default - will switch between bottom-start and top-start)MazPopoverProps['position']Noundefined
item-heightThe height of the option list itemnumberNoundefined
max-list-heightThe max height of the option listnumberNo240
max-list-widthThe max width of the option listnumberNoundefined
min-list-heightThe min height of the option listnumberNoundefined
min-list-widthThe min width of the option listnumberNoundefined
sizeThe size of the selectMazSizeNo'md'
colorThe color of the selectMazColorNo'primary'
searchDisplay search input in option listbooleanNoundefined
search-functionReplace the default search function to provide a custom search functionTSFunctionTypeNoundefined
search-thresholdThe threshold for the search input where 1 is a perfect match and 0 is a match with any characternumberNo0.75
multipleEnable the multiple selectionMultipleNoundefined
requiredMake the input required in the formbooleanNoundefined
disabledDisable the componentbooleanNoundefined
blockThe input will be displayed in full widthbooleanNoundefined
autocompleteThe autocomplete attribute of the inputstringNo'off'
translationsThe translations of the componentPartial<MazUiTranslationsNestedSchema['select']>No{ searchPlaceholder: 'Search in options', }
format-input-valueThe function to format the input value(value: Multiple extends true ? Value[] : Value) => stringNoundefined
transitionThe transition name of the panel list optionsMazPopoverProps['transition']No'scale-fade'

Events

Event namePropertiesDescription
closevalue Event - the eventOn list is closed
openOn list is opened
blurvalue Event - the eventOn input blur
focusvalue Event - the eventOn input focus
changevalue Event - the eventOn input change value
inputvalue Event - the eventOn input value
update:model-valuevalue MazInputValue | MazInputValue[] - the new valueOn model value update, returns the new value
selected-optionvalue MazSelectOption - the option objectOn selected value, returns the option object

Slots

NameDescriptionBindings
left-iconAdd a custom left iconis-open boolean - Current open state of the popover
close function - Function to close the popover
open function - Function to open the popover
toggle function - Function to toggle the popover
right-iconAdd and replace a custom right iconis-open boolean - Current open state of the popover
close function - Function to close the popover
open function - Function to open the popover
toggle function - Function to toggle the popover
no-resultsNo results slot - Displayed when no results corresponding with search query
optgroupCustom optgroup labellabel String - the label of the optgroup
defaultCustom optionoption Object - the option object
is-selected Boolean - if the option is selected
is-open Boolean - if the popover is open
close function - function to close the popover
open function - function to open the popover
toggle 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