Checkbox

Perform state toggling.

Import

Import the Checkbox primitives from ng-primitives/checkbox.

import { NgpCheckbox } from 'ng-primitives/checkbox';

Usage

Assemble the checkbox directives in your template.

<span ngpCheckbox [(ngpCheckboxChecked)]="checked">
  <ng-icon name="checkmark" aria-hidden="true" />
</span>

Reusable Component

Create a reusable component that uses the NgpCheckbox directive.

import { Component, model } from '@angular/core';
import { Checkbox } from './checkbox';

@Component({
  selector: 'app-root',
  imports: [Checkbox],
  template: `
    <app-checkbox [(checked)]="checked" />
  `,
})
export default class App {
  checked = model<boolean>(false);
}

Schematics

Generate a reusable checkbox component using the Angular CLI.

ng g ng-primitives:primitive checkbox

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Here are some additional examples of how to use the Checkbox primitives.

Checkbox Form Field

The checkbox automatically integrates with the form field primitives.

API Reference

The following directives are available to import from the ng-primitives/checkbox package:

NgpCheckbox

Apply the `ngpCheckbox` directive to an element to that represents the checkbox, such as a `button`.

• Selector: [ngpCheckbox]

Accessibility

Adheres to the Tri-State Checkbox WAI-ARIA design pattern.

Keyboard Interactions

• Space - Toggle the checked state.