MazChecklist

MazChecklist is a standalone component that allows creating a checklist with integrated search functionality. It provides a flexible and customizable user interface for selecting multiple items from a list of options. The component supports real-time search, color customization, and displays messages when no results are found.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

TIP

This component can be translated globally using the MazUi plugin.

Basic usage

vue

<template>
  Selected languages: {{ languages || 'none' }}

  <br />

  <MazChecklist
    v-model="languages"
    v-model:query="query"
    title="Select your languages"
    :search="{
      enabled: true,
      placeholder: 'Search a language',
      debounce: 300,
      autoFocus: false,
      size: 'sm'
    }"
    :items="languagesOptions"
    class="maz-h-80"
  >
    <template #item="{ item }">
      <div class="maz-flex maz-w-full maz-items-center maz-justify-between maz-gap-2">
        <span class="maz-capitalize">{{ item.label }}</span>
        <MazBadge color="theme" outlined>
          {{ item.value }}
        </MazBadge>
      </div>
    </template>
  </MazChecklist>
</template>

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

  const query = ref<string>()
  const languages = ref<string[]>()
  const languagesOptions = useDisplayNames('en-US').getAllDisplayNames({ type: 'language' }).value.map(({ code, name }) => ({
    label: name,
    value: code,
  }))
</script>

Custom search function

You can replace the default search function by providing a custom search function. Useful when you need to search by multiple fields, if you want to use a different search algorithm or if you want search into your database by fetching data from an API.

Selected employees: none

Select team members

Sarah JohnsonEngineering

sarah.johnson@company.com

4.9

Michael ChenDesign

michael.chen@company.com

4.7

Emma RodriguezMarketing

emma.rodriguez@company.com

4.8

David KimEngineering

david.kim@company.com

4.6

Lisa ThompsonProduct

lisa.thompson@company.com

4.9

John DoeMarketing

john.doe@company.com

4.9

Jane SmithEngineering

jane.smith@company.com

4.9

Jim BeamSales

jim.beam@company.com

4.9

Jill JohnsonMarketing

jill.johnson@company.com

4.9

vue

<template>
  Selected employees: {{ selectedEmployees || 'none' }}

  <br />

  <MazChecklist
    v-model="selectedEmployees"
    v-model:query="employeeQuery"
    title="Select team members"
    :search="{
      placeholder: 'Search by name, email, or department...',
      debounce: 200,
      block: true,
    }"
    :items="employees"
    :search-function="customEmployeeSearch"
    color="success"
    elevation
    class="max-h-96"
  >
    <template #item="{ item }">
      <div class="flex w-full items-center gap-4">
        <div class="flex h-12 w-12 flex-none items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 text-white font-semibold text-lg">
          {{ item.initials }}
        </div>
        <div class="flex flex-1 flex-col gap-1">
          <div class="flex items-center gap-2">
            <span class="font-semibold text-normal">{{ item.label }}</span>
            <MazBadge :color="item.departmentColor" size="xs">
              {{ item.department }}
            </MazBadge>
          </div>
          <span class="text-muted text-sm">{{ item.email }}</span>
        </div>
        <div class="flex flex-none items-center gap-1">
          <MazIcon name="star" class="text-warning-500" size="1rem" />
          <span class="text-sm font-medium">{{ item.rating }}</span>
        </div>
      </div>
    </template>
  </MazChecklist>
</template>

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

  const employeeQuery = ref<string>()
  const selectedEmployees = ref<string[]>()

  const employees = [
    {
      label: 'Sarah Johnson',
      value: 'sarah.johnson',
      email: 'sarah.johnson@company.com',
      department: 'Engineering',
      departmentColor: 'info',
      initials: 'SJ',
      rating: 4.9
    },
    {
      label: 'Michael Chen',
      value: 'michael.chen',
      email: 'michael.chen@company.com',
      department: 'Design',
      departmentColor: 'warning',
      initials: 'MC',
      rating: 4.7
    },
    {
      label: 'Emma Rodriguez',
      value: 'emma.rodriguez',
      email: 'emma.rodriguez@company.com',
      department: 'Marketing',
      departmentColor: 'success',
      initials: 'ER',
      rating: 4.8
    },
    {
      label: 'David Kim',
      value: 'david.kim',
      email: 'david.kim@company.com',
      department: 'Engineering',
      departmentColor: 'info',
      initials: 'DK',
      rating: 4.6
    },
    {
      label: 'Lisa Thompson',
      value: 'lisa.thompson',
      email: 'lisa.thompson@company.com',
      department: 'Product',
      departmentColor: 'contrast',
      initials: 'LT',
      rating: 4.9
    },
    {
      label: 'John Doe',
      value: 'john.doe',
      email: 'john.doe@company.com',
      department: 'Marketing',
      departmentColor: 'success',
      initials: 'JD',
      rating: 4.9
    },
    {
      label: 'Jane Smith',
      value: 'jane.smith',
      email: 'jane.smith@company.com',
      department: 'Engineering',
      departmentColor: 'info',
      initials: 'JS',
      rating: 4.9
    },
    {
      label: 'Jim Beam',
      value: 'jim.beam',
      email: 'jim.beam@company.com',
      department: 'Sales',
      departmentColor: 'destructive',
      initials: 'JB',
      rating: 4.9
    },
    {
      label: 'Jill Johnson',
      value: 'jill.johnson',
      email: 'jill.johnson@company.com',
      department: 'Marketing',
      departmentColor: 'success',
      initials: 'JJ',
      rating: 4.9
    },
  ]

  function customEmployeeSearch(query: string, items: typeof employees) {
    const searchTerm = query.toLowerCase().trim()

    if (!searchTerm) return items

    return items.filter(employee =>
      employee.label.toLowerCase().includes(searchTerm) ||
      employee.email.toLowerCase().includes(searchTerm) ||
      employee.department.toLowerCase().includes(searchTerm) ||
      employee.value.toLowerCase().includes(searchTerm)
    )
  }
</script>

Props

Name	Description	Type	Required	Default
model-value	The model value of the checklist (selected items)	`(T extends unknown)[]`	No	`undefined`
query	The query to filter the items (model)	`string`	No	`undefined`
items	The list of items to display	`(O extends MazChecklistItemOption)[]`	No	`undefined`
title	The title of the checklist	`string`	No	`undefined`
elevation	Add elevation to the card	`boolean`	No	`false`
search	The search input options	`boolean \| MazInputProps`	No	`{ enabled: false, debounce: 300, autoFocus: false }`
search-options	The options to normalize the search query (used by the default search function) By default, the threshold is 0.75	`intersection`	No	`undefined`
search-function	Replace the default search function to provide a custom search function	`TSFunctionType`	No	`undefined`
color	The color of the checklist (card, checkbox and search input)	`MazColor`	No	`primary`
translations	Translations of the checklist component	`DeepPartial<MazUiTranslationsNestedSchema['checklist']>`	No	`Translations from @maz-ui/translations`

Events

Event name	Properties	Description
update:query	value `mixed` - The new query	Emitted when the query change
update:model-value	value `mixed` - The new value	Emitted when the model value change

Slots

Name	Description	Bindings
title	use this slot to customize the title
no-results	use this slot to customize the no results area
no-results-text	use this slot to customize the no results message
item	use this slot to customize the item

MazChecklist ​

Basic usage ​

Custom search function ​

Props ​