@kit-ng-ui/checkbox

The Checkbox component family for Kit UI. Mirrors ant-design's Checkbox API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/checkbox @kit-ng-ui/core @kit-ng-ui/icons

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/checkbox/styles' as checkbox;

Use

import { Component, signal } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { KitCheckboxComponent, KitCheckboxGroupComponent } from '@kit-ng-ui/checkbox';

@Component({
  standalone: true,
  imports: [KitCheckboxComponent, KitCheckboxGroupComponent, ReactiveFormsModule],
  template: `
    <kit-checkbox [formControl]="agree">I agree</kit-checkbox>

    <kit-checkbox
      [(checked)]="checkAll"
      [indeterminate]="someChecked()"
    >Check all</kit-checkbox>

    <kit-checkbox-group [value]="picks()" (valueChange)="picks.set($event)">
      <kit-checkbox value="apple">Apple</kit-checkbox>
      <kit-checkbox value="banana">Banana</kit-checkbox>
      <kit-checkbox value="cherry">Cherry</kit-checkbox>
    </kit-checkbox-group>

    <kit-checkbox-group
      direction="vertical"
      [options]="fruits"
      [(value)]="picks"
    />
  `,
})
export class CheckboxDemo {
  agree = new FormControl(false);
  checkAll = signal(false);
  picks = signal<ReadonlyArray<string>>([]);
  someChecked = () => this.picks().length > 0 && this.picks().length < 3;
  fruits = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];
}

API

<kit-checkbox>

| Input | Type | Default | Description | | --------------- | ---------------- | ------- | ---------------------------------------------- | | value | unknown | null | Identifier used by the parent group | | checked | boolean | false | Standalone checked state (ignored in a group) | | indeterminate | boolean | false | Mixed-selection visual state | | disabled | boolean | false | Disable the checkbox | | autofocus | boolean | false | Native autofocus | | name | string \| null | null | Native name attribute | | inputId | string \| null | null | Native id (auto-generated if omitted) |

Outputs: (checkedChange), (change).

<kit-checkbox-group>

| Input | Type | Default | | ----------- | ------------------------------------- | -------------- | | options | KitCheckboxOption[] \| null | null | | value | unknown[] | [] | | disabled | boolean | false | | name | string \| null | null | | direction | 'horizontal' \| 'vertical' | 'horizontal' |

Outputs: (valueChange).

Both components implement ControlValueAccessor.

Behavior notes

• When a <kit-checkbox> is inside a <kit-checkbox-group>, the group owns selection: the child's local [checked] / CVA value is ignored, and toggling the child mutates the group's value array.
• [options] and projected <kit-checkbox> children may both be used in the same group; they are concatenated in DOM order.
• [indeterminate] is a visual-only state — the native indeterminate property is also set on the underlying input for accessibility.
• The label is projected via <ng-content>; consumers control text/icon/markup composition.