@webitel/ui

Appearance

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 ​

Code
vue
<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 ​

Code
vue
<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 ​

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