MazCheckbox

MazCheckbox is a standalone component that replaces the standard html input checkbox. Color options are available.

INFO

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

Basic usage

v-model="false"

Unchecked

<template>
  <MazCheckbox v-model="checked" :label="checked ? 'Checked' : 'Unchecked'" />
</template>

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

  const checked = ref(false)
</script>

Colors

v-model="[]"

primarysecondaryinfosuccesswarningdangerwhiteblack

View code

<template>
  <MazCheckbox
    v-for="color in colors"
    :key="color"
    v-model="chosenColors"
    :color="color"
    :id="color"
    name="color"
    :value="color"
  >
    {{ color }}
  </MazCheckbox>
</template>

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

  const chosenColors = ref([])

  const colors: Color[] = [
    'primary',
    'secondary',
    'info',
    'success',
    'warning',
    'danger',
    'white',
    'black',
  ]
</script>

Sizing

v-model="[]"

minixssmmdlgxl

View code

<template>
  <MazCheckbox
    v-for="size in sizes"
    :key="size"
    v-model="chosenSizes"
    name="size"
    :value="size"
    :size="size"
  >
    {{ size }}
  </MazCheckbox>
</template>

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

  const chosenSizes = ref([])

  const sizes: Size[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

Disabled

disabled disabled & checked

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
style		TSIndexedAccessType	-	undefined
class		TSIndexedAccessType	-	undefined
modelValue		union	-	undefined
id		string	-	undefined
color		Color	-	'primary'
value		union	-	undefined
name		string	-	'm-checkbox'
size		Size	-	'md'
label		string	-	undefined
disabled		boolean	-	false

Events

Event name	Properties	Description
update:model-value
change

Slots

Name	Description	Bindings
default