BaseCheckbox

Checkbox with boolean and array v-model, indeterminate state, and theme colors.

Usage

I agree to the terms

Vue

React

Angular

Selected: [ "vue" ]

Select all

Black theme

Disabled

With error

<template>
  <div style="display:flex;flex-direction:column;gap:12px">
    <BaseCheckbox v-model="agreed">I agree to the terms</BaseCheckbox>

    <div style="display:flex;flex-direction:column;gap:8px">
      <BaseCheckbox v-model="selected" value="vue">Vue</BaseCheckbox>
      <BaseCheckbox v-model="selected" value="react">React</BaseCheckbox>
      <BaseCheckbox v-model="selected" value="angular">Angular</BaseCheckbox>
    </div>
    <div style="font-size:12px;color:#888">Selected: {{ selected }}</div>

    <BaseCheckbox :indeterminate="someSelected && !allSelected" v-model="allSelected">
      Select all
    </BaseCheckbox>

    <BaseCheckbox v-model="agreed" theme="black">Black theme</BaseCheckbox>
    <BaseCheckbox v-model="agreed" disabled>Disabled</BaseCheckbox>
    <BaseCheckbox v-model="agreed" :error="true">With error</BaseCheckbox>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const agreed = ref(false)
const selected = ref<string[]>(['vue'])
const allSelected = ref(false)
const someSelected = computed(() => selected.value.length > 0)
</script>

Props

Prop	Type	Default	Description
modelValue	boolean | string[]	false	Checked state or array of values
value	boolean | string	—	Value when used in array mode
id	string	auto-generated	HTML id for label association
indeterminate	boolean	false	Shows dash icon (partial selection)
error	boolean	false	Applies error styling
disabled	boolean	false	Disables the checkbox
theme	red | black	red	Checked color theme