Components

Checkbox

A control that allows the user to toggle between checked and unchecked states.

An accessible checkbox with support for custom checked indicators, labels, descriptions, indeterminate state, and form integration.

Anatomy

#indicator: Visual check mark or icon inside the checkbox button.
#label: Label text beside the checkbox.
#description: Supplementary text below the label.

Usage

Email notificationsReceive updates about your account activity.Marketing emailsGet notified about new features and promotions.All updatesA mix of indeterminate, checked, and unchecked.

Examples

Custom indicator

Use #indicator to render your own checkmark or icon.

<template>
  <Checkbox v-model="checked">
    <template #indicator="{ checked }">
      <svg v-if="checked" class="check-icon" .../>
    </template>
  </Checkbox>
</template>

With description

Use description when the label needs supporting context.

<template>
  <Checkbox
    v-model="enabled"
    label="Enable notifications"
    description="We'll email you when something important happens."
  />
</template>

Indeterminate state

Use "indeterminate" for parent or mixed-selection states.

<script setup lang="ts">
import { ref } from "vue";
const value = ref<boolean | "indeterminate">("indeterminate");
</script>

<template>
  <Checkbox v-model="value">
    <template #indicator="{ checked }">
      <span v-if="checked === 'indeterminate'">—</span>
      <span v-else-if="checked">✓</span>
    </template>
  </Checkbox>
</template>

Custom true/false values

Use custom values when the model should store domain values instead of booleans.

<script setup lang="ts">
const permission = ref<"granted" | "denied">("denied");
</script>

<template>
  <Checkbox
    v-model="permission"
    true-value="granted"
    false-value="denied"
    label="Allow camera access"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the checkbox.
`id`	`string`	auto	HTML id for the button element.
`name`	`string`	—	HTML name for form submission.
`required`	`boolean`	`false`	Marks the field as required.
`trueValue`	`unknown`	`true`	Model value when checked.
`falseValue`	`unknown`	`false`	Model value when unchecked.
`label`	`string`	—	Label text. Slot `#label` takes priority.
`description`	`string`	—	Description text. Slot `#description` takes priority.
`ui`	`CheckboxUi`	—	CSS class overrides.

Slots

Slot	Scoped props	Description
`indicator`	`{ checked }`	Visual check mark inside the button. `checked` is `true`, `false`, or `"indeterminate"`.
`label`	—	Label text. Defaults to the `label` prop.
`description`	—	Description text. Defaults to the `description` prop.

Emits

Event	Payload	Description
`value-change`	`[value: CheckboxValue, details]`	Fired when the checked state changes.

UI Options

Key	Description
`wrapper`	Outer wrapper element.
`root`	The interactive button element.
`indicator`	The indicator container.
`input`	Hidden native input used for form submission.
`text`	Wrapper around label and description.
`label`	The label element.
`description`	The description element.

Styling Hooks

UI key	CSS class	Data attrs
`wrapper`	`akaza-checkbox-wrapper`	—
`root`	`akaza-checkbox`	`data-akaza-state`, `data-akaza-disabled`
`indicator`	`akaza-checkbox-indicator`	`data-akaza-state`
`input`	`akaza-checkbox-input`	—
`text`	`akaza-checkbox-text`	—
`label`	`akaza-checkbox-label`	—
`description`	`akaza-checkbox-description`	—

Button

A button that can show a loading state during async operations.

Checkbox Group

Items-based multi-select built on Checkbox.