Vitral 0.2
Form

Checkbox

A native checkbox under a drawn box, bound to a boolean or to an array of values, with a mixed state.

WAI-ARIA tested

Import

main.ts
import { Checkbox } from '@vitral/vue';

Binary

accepted: false, newsletter: no
<script setup lang="ts">import { Checkbox } from '@vitral/vue';import { ref } from 'vue'; const accepted = ref(false);const newsletter = ref('no');</script> <template>    <Checkbox v-model="accepted" label="I accept the terms" />    <Checkbox v-model="newsletter" true-value="yes" false-value="no" label="Send me the newsletter" />    <small style="color: var(--vt-text-muted-color)">accepted: {{ accepted }}, newsletter: {{ newsletter }}</small></template>

Group and mixed state

The parent box is indeterminate while only some toppings are chosen.

Toppings
[ "cheese" ]
<script setup lang="ts">import { Checkbox } from '@vitral/vue';import { computed, ref } from 'vue'; const toppings = ref<string[]>(['cheese']);const all = ['cheese', 'mushroom', 'olives'];const allChecked = computed({    get: () => toppings.value.length === all.length,    set: (on: boolean) => (toppings.value = on ? [...all] : [])});const mixed = computed(() => toppings.value.length > 0 && toppings.value.length < all.length);</script> <template>    <div role="group" aria-labelledby="cb-toppings" style="display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem">        <small id="cb-toppings" style="color: var(--vt-text-muted-color)">Toppings</small>        <Checkbox v-model="allChecked" :indeterminate="mixed" label="All toppings" />        <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-inline-start: 1.75rem">            <Checkbox v-model="toppings" value="cheese" label="Cheese" name="topping" />            <Checkbox v-model="toppings" value="mushroom" label="Mushroom" name="topping" />            <Checkbox v-model="toppings" value="olives" label="Olives" name="topping" />        </div>        <small style="color: var(--vt-text-muted-color)">{{ toppings }}</small>    </div></template>

Rich content

<script setup lang="ts">import { Checkbox } from '@vitral/vue';</script> <template>    <Checkbox binary>I have read the <a href="#privacy">privacy notice</a></Checkbox></template>

Sizes and states

<script setup lang="ts">import { Checkbox } from '@vitral/vue';</script> <template>    <Checkbox :model-value="true" size="small" label="Small" />    <Checkbox :model-value="true" label="Normal" />    <Checkbox :model-value="true" size="large" label="Large" />    <Checkbox :model-value="false" invalid label="Invalid" />    <Checkbox :model-value="false" disabled label="Disabled" />    <Checkbox :model-value="true" disabled label="Disabled checked" />    <Checkbox :model-value="true" readonly label="Read only" /></template>

API

Read from packages/vue/src/components/Checkbox/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
valueanyThe value this box adds to an array v-model when checked. Leave it out (or set `binary`) and v-model is a boolean instead.
binarybooleanv-model is a single checked/unchecked value rather than an array. Implied when there is no `value`.
trueValueanyWhat a checked binary box sets v-model to. Defaults to true.
falseValueanyWhat an unchecked binary box sets v-model to. Defaults to false.
labelstringThe text beside the box; the default slot takes richer content. Either becomes its `<label>`.
sizeSize—
invalidboolean—
disabledboolean—
readonlyboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
changeevent: CheckboxChangeEvent—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NameSlot propsDescription
default—The label's content.
icon(props: { checked: boolean; indeterminate: boolean })Replaces the check (and the dash of the mixed state).

Used in these templates