Components / Forms

Checkbox

A native checkbox for boolean or array models, including mixed state.

Preview

CheckedUncheckedIndeterminateDisabled

Use cases

Terms confirmation

Require a single explicit acknowledgement before submitting a form.

Multiple preferences

Bind several native checkboxes to one array of selected values.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Checkbox from './components/ui/checkbox/Checkbox.vue'
const accepted = ref(false)
</script>

<template>
  <Checkbox v-model="accepted" required>Accept the terms</Checkbox>
</template>

More examples

Required acknowledgement

The wrapping label enlarges the clickable text target.

Required acknowledgement

<script setup lang="ts">
import { ref } from 'vue'
import Checkbox from './components/ui/checkbox/Checkbox.vue'
const accepted = ref(false)
</script>
<template>
  <label><Checkbox v-model="accepted" name="terms" required /> I accept the terms</label>
</template>

Notification channels

Array mode emits a new array when a choice changes.

Notification channels

<script setup lang="ts">
import { ref } from 'vue'
import Checkbox from './components/ui/checkbox/Checkbox.vue'
const channels = ref<string[]>(['email'])
</script>
<template>
  <label><Checkbox v-model="channels" value="email" name="channel" /> Email</label>
  <label><Checkbox v-model="channels" value="sms" name="channel" /> Text message</label>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Checkbox
Name	Type	Default or requirement
`v-model`	boolean \| value[]	false
`value`	generic value	undefined
`indeterminate`	boolean	false
`invalid`	boolean	false

The underlying input retains native form, label, and keyboard behavior.

Implementation notes

Use scalar string values when native form submission matters.
For a select-all control, derive indeterminate from the selected items and update it after each change.

Accessibility and localization

Give each checkbox a wrapping or associated label. Native Space, focus, and checked semantics are preserved.