MazCheckbox

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

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

Basic usage

v-model="false"

Unchecked

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

const checked = ref(false)
</script>

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

Colors

v-model="[]"

primary

secondary

info

success

warning

destructive

contrast

accent

View code

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

const chosenColors = ref([])

const colors: Color[] = [
  'primary',
  'secondary',
  'info',
  'success',
  'warning',
  'destructive',
  'contrast',
  'accent',
]
</script>

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

Sizing

v-model="[]"

mini

xs

sm

md

lg

xl

View code

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

const chosenSizes = ref([])

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

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

Disabled

disabled

disabled & checked

Props

Name	Description	Type	Required	Default
style	Style attribut of the component root element	Native type	No	undefined
class	Class attribut of the component root element	Native type	No	undefined
model-value	The model value of the checkbox	T	No	undefined
id	The id of the checkbox	string	No	undefined
color	The color of the checkbox	MazColor	No	'primary'
value	The value of the checkbox when selected	MazCheckboxValue	No	undefined
name	The name of the checkbox	string	No	'm-checkbox'
size	The size of the checkbox	MazSize	No	'md'
label	Text label	string	No	undefined
disabled	If the checkbox is disabled	boolean	No	false
error	Whether there is an error with the input.	boolean	No	undefined
success	Whether the input is successful.	boolean	No	undefined
warning	Whether there is a warning with the input.	boolean	No	undefined
hint	The hint text to display below the input.	string	No	undefined
tabindex		any	No	0

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