Forms

Stable - @kikita-labs/ui v1.6.1

Checkbox

Native checkbox styling with field ARIA wiring and invalid state integration.

Import

Use the directive on native checkbox inputs and pair it with kui-field for label, hint, and error wiring.

checkbox.ts
import { KuiCheckboxDirective, KuiFieldComponent } from '@kikita-labs/ui';

Usage

Open in Playground

Keep a native label around the checkbox for option text.

Control product and release emails

<kui-field label="Notifications" hint="Control product and release emails">
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" [checked]="receiveUpdates()" />
    <span>Receive updates</span>
  </label>
</kui-field>

Sizes and states

Match checkbox size to surrounding field density and text scale; disabled and invalid follow native and field-driven state.

<div class="checkbox-size-example">
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" size="xs" />
    <span>Extra small</span>
  </label>
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" size="sm" checked />
    <span>Small</span>
  </label>
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" size="md" checked />
    <span>Medium</span>
  </label>
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" size="lg" />
    <span>Large</span>
  </label>
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" disabled />
    <span>Disabled</span>
  </label>
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" disabled checked />
    <span>Disabled and checked</span>
  </label>
  <label class="checkbox-option">
    <input kuiCheckbox type="checkbox" invalid />
    <span>Invalid</span>
  </label>
</div>

API

Inputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg''md'Checkbox size mapped to Kikita checkbox tokens.
invalidbooleanfalseMarks the checkbox invalid outside a field error state.
idstring | undefined-Explicit id override. Inside kui-field, the field id is used when omitted.
checkedbooleanfalseNative checked state. Not a directive input; bind it directly on the input element.
disabledbooleanfalseNative disabled state. Not a directive input; bind it directly on the input element.
indeterminatebooleanfalseNative DOM property, not an HTML attribute or directive input. Set it imperatively on the element to show the dash-mark state; .kui-checkbox styles :indeterminate.

Accessibility

Checkbox keeps native input semantics and adds field-described state when used inside kui-field.

  • Use a native label for the checkbox option text.
  • Use kui-field for group label, hint, error, and described-by wiring.
  • Use native checked and disabled states; do not replace the input with a custom role.
  • Use invalid only when the checkbox is outside a field error state.
  • .kui-checkbox styles the native :indeterminate pseudo-class (a dash mark instead of a checkmark). indeterminate is a DOM property, not an HTML attribute, so set it imperatively on the element.