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

Select color

selectedValue:

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

const selectedValue = ref()
</script>

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

  selectedValue: {{ selectedValue }}
</template>

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

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

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

Opt Group

Group your options like a native optgroup

Select options

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

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

Disabled

Select color

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

Size

Select color

Select color

Select color

Select color

Select color

Select color

<template>
  <MazSelect
    v-for="size in sizes"
    :key="size"
    label="Select color"
    v-model="selectedValue"
    :options="colors"
    :size="size"
  />
</template>

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

  const selectedValue = ref()

  const sizes: MazSize[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</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, MazAvatar } from 'maz-ui/components'

  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

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

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: 'destructive', labelOption: 'destructive label', inputLabel: 'destructive input', },
  { valueOption: 'white', labelOption: 'white label', inputLabel: 'white input', },
  { valueOption: 'black', labelOption: 'black label', inputLabel: 'black input', },
]
</script>

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

Types

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

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 popover close function - Function to close the popover open function - Function to open the popover toggle function - Function to toggle the popover
right-icon	Add and replace a custom right icon	is-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-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 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