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	Possible values
model-value	v-model The model value of the checkbox	T	No	-	-
id	The id of the checkbox	string	No	-	-
color	The color of the checkbox	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
value	The value of the checkbox when selected	MazCheckboxValue	No	-	-
name	The name of the checkbox	string	No	"m-checkbox"	-
size	The size of the checkbox	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	-	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'
label	Text label	string	No	-	-
disabled	If the checkbox is disabled	boolean	No	-	-
error	Whether there is an error with the input.	boolean	No	-	-
success	Whether the input is successful.	boolean	No	-	-
warning	Whether there is a warning with the input.	boolean	No	-	-
hint	The hint text to display below the input.	string	No	-	-

Events

Event name	Payload	Description
update:model-value	value: T	Emitted when the model value change
blur	value: FocusEvent	Emitted when the checkbox lost focus
change	value: T	Emitted when the model value change
focus	value: FocusEvent	Emitted when the checkbox is focused

Slots

Name	Description	Bindings
default		value MazCheckboxValue