Primitives

Checkbox

Perform state toggling.

Import

Import the Checkbox primitives from ng-primitives/checkbox.

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

Assemble the checkbox directives in your template.

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

Generate a checkbox component with the NgpCheckbox primitive preconfigured.

 ng g ng-primitives:checkbox

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

The checkbox automatically integrates with the form field primitives.

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

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

Define the checked state.

Define the interminate state.

Define the disabled state.

Event emitted when the state changes.

Event emitted when the indeterminate state changes.

Attribute	Description	Value
`data-checked`	The checked state of the checkbox.	`true` \| `false`
`data-indeterminate`	The indeterminate state of the checkbox.	`true` \| `false`
`data-disabled`	The disabled state of the checkbox.	`true` \| `false`
`data-hover`	The hover state of the checkbox.	`true` \| `false`
`data-focus-visible`	The focus state of the checkbox.	`true` \| `false`
`data-press`	The press state of the checkbox.	`true` \| `false`