Checkbox

Native checkbox

A real <input type="checkbox"> under a square plate with a drawn tick, wrapped in its label so the whole row is the hit target. v-model is a boolean, or — with value on each box — an array of the checked values. description adds a second line and wires aria-describedby; indeterminate shows the dash for "some of these" (a parent of a group; it's a display state — clicking sets it checked). A box with no visible text needs an aria-label, which passes through to the input.

For a message on an invalid box, put it in a Field; for a set of exclusive choices, RadioGroup; for an on/off setting that takes effect at once rather than a choice submitted with a form, Switch.

Array

megumieririutahapicks: [ "eriri" ]

<script setup lang="ts">
import { ref } from "vue";
import { BlessCheckbox } from "blessing-ui";
const picks = ref<string[]>(["eriri"]);
</script>

<template>
  <div class="row">
    <BlessCheckbox v-for="h in ['megumi', 'eriri', 'utaha']" :key="h" v-model="picks" :value="h">{{
      h
    }}</BlessCheckbox>
    <small>picks: {{ picks }}</small>
  </div>
</template>

Basic

I agree to the termsrequired to continueIndeterminateDisabled checkedInvalid

<script setup lang="ts">
import { ref } from "vue";
import { BlessCheckbox } from "blessing-ui";
const agree = ref(false);
</script>

<template>
  <div class="col">
    <BlessCheckbox v-model="agree" description="required to continue"
      >I agree to the terms</BlessCheckbox
    >
    <BlessCheckbox :model-value="true" indeterminate>Indeterminate</BlessCheckbox>
    <BlessCheckbox :model-value="true" disabled>Disabled checked</BlessCheckbox>
    <BlessCheckbox :model-value="false" invalid>Invalid</BlessCheckbox>
  </div>
</template>

Usage

import { BlessCheckbox } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
value	string | number	—
indeterminate	boolean	—
disabled	boolean	—
invalid	boolean	—
description	string	—
modelValue	boolean | (string | number)[]	false

Events

Name	Payload	Description
update:modelValue	[value: boolean | (string | number)[]]

Slots

Name	Scope	Description
default	—