ZvCheckbox
ZvCheckbox is a standalone component
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Basic usage
vue
<template>
<ZvCheckbox id="checkbox-1" v-model="checkboxValue" name="checkbox-1" label="checkbox-1" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ZvCheckbox from '@zadigetvoltaire/ui/components/ZvCheckbox'
const checkboxValue = ref(false)
</script>Simple checkbox with validations
Message
message
Show code
html
<ZvCheckbox
id="checkbox-1"
v-model="checkboxValue"
name="checkbox-1"
label="checkbox-1"
:validations="[{ text: 'message', condition: true, type: 'message' }]"
/>Success
error message
Show code
html
<ZvCheckbox
id="checkbox-1"
v-model="checkboxValue"
name="checkbox-1"
label="checkbox-1"
:validations="[{ text: 'error message', condition: true, type: 'success' }]"
/>Error
error message
Show code
html
<ZvCheckbox
id="checkbox-1"
v-model="checkboxValue"
name="checkbox-1"
label="checkbox-1"
:validations="[{ text: 'error message', condition: true, type: 'error' }]"
/>Mutliple checkboxes in a group
normal message
success message
error message
main message
Show code
vue
<template>
<ZvCheckboxGroup :validations="[{ text: 'main message', condition: true, type: 'error' }]" :column="useColumn">
<ZvCheckbox
id="checkbox-1"
v-model="checkboxValue1"
name="checkbox-1"
label="checkbox-1"
:validations="[{ text: 'normal message', condition: true, type: 'message' }]"
/>
<ZvCheckbox
id="checkbox-2"
v-model="checkboxValue2"
name="checkbox-2"
label="checkbox-2"
:validations="[{ text: 'success message', condition: true, type: 'success' }]"
/>
<ZvCheckbox
id="checkbox-3"
v-model="checkboxValue3"
name="checkbox-3"
label="checkbox-3"
:validations="[{ text: 'error message', condition: true, type: 'error' }]"
/>
</ZvCheckboxGroup>
<ZvButton size="medium" @click="useColumn = !useColumn"> Toggle Column Prop </ZvButton>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ZvCheckboxGroup from '@zadigetvoltaire/ui/components/ZvCheckboxGroup'
import ZvCheckbox from '@zadigetvoltaire/ui/components/ZvCheckbox'
const checkboxValue1 = ref(false)
const checkboxValue2 = ref(false)
const checkboxValue3 = ref(false)
</script>