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
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 |