Checkbox

Checkbox renders a labeled control with checked, unchecked, and indeterminate states. It supports native forms and custom indicators.

Anatomy

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

Usage

<script setup lang="ts">
import { ref } from "vue";
import { Checkbox } from "akaza-ui";

const checked = ref(false);
</script>

<template>
  <Checkbox v-model="checked" label="Accept terms" />
</template>

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>

Field and native forms

Inside Field, Checkbox inherits its id, name, required/disabled state, accessible label, and error/hint description. Validation is revealed after interaction or an invalid submit, not merely because an untouched required control is empty. Invalid submission focuses the visible button. Required validation also works without a name; unnamed controls do not submit a value.

Clicking label text activates the native button, so a disabled fieldset remains disabled. Links and other interactive descendants in the label do not toggle the checkbox. Native reset restores its mount-time model unless the reset is canceled.

class/ui.wrapper style the outer wrapper. ui.root styles the checkbox button. Supply dimensions, border, radius, spacing, and disabled opacity through ui.

API Reference

Props

Slots

Emits

UI Options

Styling Hooks

Keyboard

Visible label is a real <label> associated with control, so pointer and touch activation on label toggles checkbox too.