MazSwitch

MazSwitch 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

primarysecondaryinfosuccesswarningdestructiveaccentcontrast

Disabled

Disabled

<template>
  <MazSwitch
    v-for="color in colors"
    v-model="switchValue"
    :color="color"
    :name="color"
    :key="color"
  />

  <p>Disabled</p>

  <MazSwitch
    v-model="switchValue"
    name="disabled"
    disabled
  >
    {{ color }}
  </MazSwitch>
</template>

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

  const switchValue = ref(false)
  const switchValueDisabled = ref(false)

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

Props

Name	Description	Type	Required	Default	Possible values
model-value	v-model The model value of the switch	boolean	No	false	-
id	The id of the switch	string	No	-	-
disabled	If the switch is disabled	boolean	No	-	-
name	The name of the switch	string	No	-	-
label	Text label	string	No	-	-
color	The color of the switch	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
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: boolean	Emitted when the model value changes
blur	value: FocusEvent	Emitted when the switch lost focus
change	value: boolean	Emitted when the model value changes
focus	value: FocusEvent	Emitted when the switch is focused

Slots

Name	Description	Bindings
default	The label of the switch	value boolean - The value of the switch