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>

Schematics

Generate a checkbox component with the NgpCheckbox primitive preconfigured.

 ng g ng-primitives:checkbox

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]
• Exported As: ngpCheckbox
• Host Directives: NgpFormControl, NgpHover, NgpFocusVisible, NgpPress

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
data-checked	Applied when the checkbox is checked.
data-indeterminate	Applied when the checkbox is indeterminate.
data-disabled	Applied when the checkbox is disabled.
data-hover	Applied when the checkbox is hovered.
data-focus-visible	Applied when the checkbox is focused.
data-press	Applied when the checkbox is pressed.

Accessibility

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

Keyboard Interactions

• Space - Toggle the checked state.