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