AngularLynx

    Checkbox

    A small box that toggles a check mark on tap.

    ui-checkboxsrc/app/app.ts

    Installation

    npx @blotch/dolan add checkbox
    import { UiCheckbox } from '../components/ui/checkbox';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import { UiCheckbox } from '../components/ui/checkbox';
import { UiLabel } from '../components/ui/label';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, UiCheckbox, UiLabel],
  template: `
    <view class="flex flex-row items-center">
      <ui-checkbox [(checked)]="accepted" />
      <ui-label>Accept the terms</ui-label>
    </view>
  `,
})
export class App {
  protected readonly accepted = signal(false);
}
    • This example also uses Label. Tapping the label doesn't toggle the checkbox.
    • The box is 20 pixels, but its tap area is 44 by 44 pixels, a comfortable size for a finger.
    • The check mark pops in and out when the state changes.

    Disabled

    <ui-checkbox [disabled]="true" />
<ui-checkbox [disabled]="true" [checked]="true" />

    A disabled checkbox dims and ignores taps.

    Listen without a signal

    <ui-checkbox (changed)="onNewsletter($event)" />

    changed emits the new state after each tap.

    API

    UiCheckbox

    InputTypeDefaultDescription
    checkedbooleanfalseWhether it's checked. Supports [(checked)].
    disabledbooleanfalseDims the checkbox and ignores taps.
    classstring''Extra Tailwind classes for the box, not the tap area.
    OutputTypeDescription
    changedbooleanEmits the new state after a tap.
    checkedChangebooleanEmits the new state, for [(checked)].

    UiCheckbox also has a public toggle() method, which does nothing while disabled.