Skip to content

MazCheckbox

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

Basic usage

v-model="false"

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

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

View code
vue
<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

Props

NameDescriptionTypeRequiredDefault
styleStyle attribut of the component root elementNative typeNoundefined
classClass attribut of the component root elementNative typeNoundefined
model-valueThe model value of the checkboxTNoundefined
idThe id of the checkboxstringNoundefined
colorThe color of the checkboxMazColorNo'primary'
valueThe value of the checkbox when selectedMazCheckboxValueNoundefined
nameThe name of the checkboxstringNo'm-checkbox'
sizeThe size of the checkboxMazSizeNo'md'
labelText labelstringNoundefined
disabledIf the checkbox is disabledbooleanNofalse
errorWhether there is an error with the input.booleanNoundefined
successWhether the input is successful.booleanNoundefined
warningWhether there is a warning with the input.booleanNoundefined
hintThe hint text to display below the input.stringNoundefined
tabindexanyNo0

Events

Event namePropertiesDescription
update:model-valuevalue mixed - The new valueEmitted when the model value change
changevalue mixed - The new valueEmitted when the model value change
blurvalue FocusEvent - The focus eventEmitted when the checkbox lost focus
focusvalue FocusEvent - The focus eventEmitted when the checkbox is focused

Slots

NameDescriptionBindings
default