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

primary

secondary

info

success

warning

danger

white

black

theme

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',
    'theme',
  ]
</script>

Sizing

v-model="[]"

mini

xs

sm

md

lg

xl

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	Style attribut of the component root element	TSIndexedAccessType	-	undefined
class	Class attribut of the component root element	TSIndexedAccessType	-	undefined
modelValue	The model value of the checkbox	T	-	undefined
id	The id of the checkbox	string	-	undefined
color	The color of the checkbox	Color	-	'primary'
value	The value of the checkbox when selected	CheckboxValue	-	undefined
name	The name of the checkbox	string	-	'm-checkbox'
size	The size of the checkbox	Size	-	'md'
label	Text label	string	-	undefined
disabled	If the checkbox is disabled	boolean	-	false
error	Whether there is an error with the input.	boolean	-
success	Whether the input is successful.	boolean	-
warning	Whether there is a warning with the input.	boolean	-
hint	The hint text to display below the input.	string	-

Events

Event name	Properties	Description
update:model-value	value mixed - The new value	Emitted when the model value change
change	value mixed - The new value	Emitted when the model value change
blur	value FocusEvent - The focus event	Emitted when the checkbox lost focus
focus	value FocusEvent - The focus event	Emitted when the checkbox is focused

Slots

Name	Description	Bindings
default