Kaiko UI Kaiko UI

Checkbox

Stable

Interactive checkbox component with labels, validation states, and multiple styling options for forms and settings.

API Reference

Attribute Description Type Default
label Checkbox label text string ""
color Checkbox color theme string "primary"
size Checkbox size variant string "md"
checked Sets checkbox as checked by default; use :checked=False to clear boolean False
disabled Disables checkbox interaction boolean False
required Marks checkbox as a required field boolean False
error Single error message text string ""
errors List of error message strings list []
hint Helper text shown below the checkbox string ""
hx HTMX event integration for server-side reactivity string ""

color

primary secondary accent neutral success warning info error

size

xs sm md lg xl

Accessibility

Labels: always provide a label so that the checkbox has an accessible name. For standalone checkboxes without a visible label, add an aria-label directly on the component.

Required fields: use required together with a visible hint indicating the field is required. Relying solely on the browser's native required behavior is not sufficient for all assistive technologies.

Errors: when error or errors are set, ensure the error text is associated with the input via aria-describedby so screen readers announce the error on focus.

Examples

Usage 


<c-checkbox label="I agree to the terms and conditions" />

Basic Checkbox 

<c-checkbox label="I agree to the terms and conditions" />
<c-checkbox label="Subscribe to newsletter" :checked=True />

Without Labels 

<!-- Standalone checkboxes -->
<c-checkbox />
<c-checkbox :checked=False />
<c-checkbox checked />
<c-checkbox :checked=True />

Colors 

<c-checkbox label="Primary" color="primary" :checked=True />
<c-checkbox label="Success" color="success" :checked=True />
<c-checkbox label="Error" color="error" :checked=True />

Sizes 

<c-checkbox label="Small" size="sm" :checked=True />
<c-checkbox label="Large" size="lg" :checked=True />
<c-checkbox label="Extra Large" size="xl" :checked=True />

Hint and Error

We only send product updates.
You must accept the terms.
Select at least one option
Must confirm selection
<c-checkbox label="Email updates" hint="We only send product updates." />
<c-checkbox label="Accept terms" error="You must accept the terms." />
<c-checkbox label="Confirm preferences" :errors="['Select at least one option', 'Must confirm selection']" />

Alpine.js Integration

Current Values: 
<div x-data="{ preferences: { notifications: true, newsletter: false } }">
  <c-checkbox label="Email notifications"
              x-model="preferences.notifications"
              color="primary" />
  <c-checkbox label="Newsletter subscription"
              x-model="preferences.newsletter"
              color="info" />
</div>