wt-checkbox.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
value		union	''	Checkbox value, which should be present in checked list, if checked
label		string	''	Checkbox label text
disabled		boolean	false	Disables the checkbox

Slots

Name	Scope	Description
label		Custom label markup

Example Checkbox

Checkbox

Code

<script setup>
import { ref } from 'vue';

const selected = ref(false);
</script>

<template>
  <wt-checkbox
    v-model:selected="selected"
    label="Checkbox"
  />
</template>

<style scoped lang="scss"></style>

Example Disabled Checkbox

Checkbox

Code

<script setup>
import { ref } from 'vue';

const selected = ref(true);
</script>

<template>
  <wt-checkbox
    v-model:selected="selected"
    label="Checkbox"
    disabled
  />
</template>

<style scoped lang="scss"></style>

Example Multiple Checkboxes

Multiple checkbox 1

Multiple checkbox 2

Code

<script setup>
import { ref } from 'vue';

const options = ['Option 1', 'Option 2'];
const selectedList = ref([options[0]]);
</script>

<template>
  <wt-checkbox v-model:selected="selectedList" :value="options[0]" label="Multiple checkbox 1" />
  <wt-checkbox v-model:selected="selectedList" :value="options[1]" label="Multiple checkbox 2" />
</template>