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.

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 ​

Events ​