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.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

TIP

This component use MazInput, so it inherits all his props

Basic usage

Select color

selectedValue:

<template>
  <MazSelect
    v-model="selectedValue"
    label="Select color"
    :color="color"
    :options="['primary', 'secondary', 'info', 'success', 'danger', 'warning']"
  />

  selectedValue: {{ selectedValue }}
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import MazSelect from 'maz-ui/components/MazSelect'

  const selectedValue = ref()
</script>

Multiple

Choose options

selectedValues:

<MazSelect
  v-model="selectedValues"
  :options="colors"
  label="Choose options"
  multiple
/>

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="[...]" />

Select color

<MazSelect
  v-model="selectedValue"
  label="Select color"
  :options="colors"
  search
/>

Custom search function

You can provide your own search function to customize the search behavior

<template>
  <MazSelect
    placeholder="Select color"
    v-model="selectedValue"
    :options="colors"
    search
    :search-function="customSearchFunction"
  />
</template>

<script lang="ts" setup>
  import MazSelect from 'maz-ui/components/MazSelect'

  const selectedValue = ref()

  function customSearchFunction(query: string, options: typeof colors) {
    return options.filter(
      (option) => option.label.toLowerCase().includes(query.toLowerCase())
    )
  }
</script>

Opt Group

Group your options like a native optgroup

Select options

<template>
  <MazSelect
    v-model="optGroupValue"
    label="Select option"
    :options="optGroup"
    multiple
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const selectedValue = ref()
  const optGroup = [
    { label: 'Basic colors', options: ['primary', 'secondary', 'danger'] },
    { label: 'Custom colors', options: [{ label: 'third', value: 'third' }] },
  ]
</script>

Custom template options

Customize the options list with your own template

Select color

<template>
  <MazSelect
  label="Select color"
  v-model="selectedUser"
  :options="customTemplateOptions"
  v-slot="{ option, isSelected }"
  search
>
  <div class="flex items-center" style="width: 100%; gap: 1rem">
    <MazAvatar size="0.8rem" :src="option.picture" />
    <strong>
      {{ option.label }}
    </strong>
    </div>
  </MazSelect>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import MazSelect from 'maz-ui/components/MazSelect'
  import MazAvatar from 'maz-ui/components/MazAvatar'

  const selectedUser = ref()

  const customTemplateOptions = [
    { picture: 'https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&seed=JamesSmile', label: 'James Smile', value: 1 },
    { picture: 'https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&seed=BradSmile', label: 'Brad Smile', value: 2 },
    { picture: 'https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&seed=CedricSmile', label: 'Cedric Smile', value: 3 },
    { picture: 'https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&seed=HarrySmile', label: 'Harry Smile', value: 4 },
  ]
</script>

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

<template>
  <MazSelect
    v-model="selectedValueCustom"
    :options="options"
    :color="selectedValueCustom"
    option-value-key="valueOption"
    option-label-key="labelOption"
    option-input-value-key="inputLabel"
    search
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const selectedValueCustom = ref('danger')

  const customOptions = [
    { valueOption: 'primary', labelOption: 'primary label', inputLabel: 'primary input', },
    { valueOption: 'secondary', labelOption: 'secondary label', inputLabel: 'secondary input', },
    { valueOption: 'info', labelOption: 'info label', inputLabel: 'info input', },
    { valueOption: 'success', labelOption: 'success label', inputLabel: 'success input', },
    { valueOption: 'warning', labelOption: 'warning label', inputLabel: 'warning input', },
    { valueOption: 'danger', labelOption: 'danger label', inputLabel: 'danger input', },
    { valueOption: 'white', labelOption: 'white label', inputLabel: 'white input', },
    { valueOption: 'black', labelOption: 'black label', inputLabel: 'black input', },
  ]
</script>

Types

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

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
style	Style attribut of the component root element	TSIndexedAccessType	-	undefined
class	Class attribut of the component root element	TSIndexedAccessType	-	undefined
id	The id of the select	string	-	undefined
modelValue	The value of the select	union	-	undefined
options	The options of the select	Array	-	undefined
optionValueKey	The key of the option value @default 'value'	string	-	'value'
optionLabelKey	The key of the option label @default 'label'	string	-	'label'
optionInputValueKey	The key of the option input value @default 'label'	string	-	'label'
listPosition	The position of the list @default 'bottom left'	Position	-	'bottom left'
itemHeight	The height of the option list item	number	-	undefined
maxListHeight	The max height of the option list	number	-	240
maxListWidth	The max width of the option list	number	-	undefined
minListHeight	The min height of the option list	number	-	undefined
minListWidth	The min width of the option list	number	-	undefined
size	The size of the select @default 'md'	Size	-	'md'
color	The color of the select @default 'primary'	Color	-	'primary'
search	Display search input in option list	boolean	-
searchPlaceholder	The placeholder of the search input @default 'Search in options'	string	-	'Search in options'
searchFunction	Replace the default search function to provide a custom search function @default undefined	TSFunctionType	-
searchThreshold	The threshold for the search input where 1 is a perfect match and 0 is a match with any character @default 0.75	number	-	0.75
open	if true, the option list is opened by default	boolean	-
multiple	Enable the multiple selection	boolean	-	undefined
required	Make the input required in the form	boolean	-
disabled	Disable the component	boolean	-
block	The input will be displayed in full width	boolean	-
excludeSelectors	The exclude selectors for the v-closable directive - will exclude the elements from the directive	Array	-	undefined
autocomplete	The autocomplete attribute of the input @default 'off'	string	-	'off'

Events

Event name	Properties	Description
close	value Event - the event	On list is closed
open	value boolean - if the list is opened or not	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 ModelValueSimple | ModelValueSimple[] - 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
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 object is-selected Boolean - if the option is selected

Expose

openList

Method to open the option list

closeList

Method to close the option list