A checkbox directive set that provides a flexible and accessible way to enhance form interactions, enabling full customization with indeterminate states and dynamic property bindings.

Installation

Add and import the module into your imports section.

Module

Standalone directives

Anatomy

Directive's set structure.

<docs-anatomy [node]="componentStructure" />

Input props

CheckboxRoot Attribute directive

The root directive for the checkbox. Handles the state, keyboard navigation and bindings.

<docs-table [columns]="columnsInput" [rows]="rootInputRows" />

CheckboxInput Attribute directive

A directive to bind the state and the accessibility rules to the input element.

<docs-table [columns]="attributesColumns" [rows]="itemAttrRows" />

State

CheckboxStateService allows to control the inputs and toggle of the checkbox.

Access directive API with exportAS

We can access the state of the checkbox using a template variable. All the directives expose themself with the same name. We have access to the directive's attributes and also the state service.

Example

We could use it with any other directive. For example with #check="vacCheckboxRoot" and access the state.

<docs-code [code]="stateExample" language="html" />

State API - CheckboxStateService

Documentation for the checkbox state service API.

Variables

<docs-table [columns]="stateVarsColumns" [rows]="stateRows" />

Methods

<docs-table [columns]="stateMethodsColumns" [rows]="stateMethodRows" />

Types/Interfaces

Avatar interfaces that you can import.

<docs-code [code]="models" language="ts" />

Accessibility

This checkbox set of directives is designed in accordance with the WAI-ARIA Authoring Practices Guide. For more details on accessibility features and guidelines, please refer to the WAI-ARIA Checkbox Practices. This ensures our component meets modern accessibility standards, providing an inclusive user experience.

Keyboard Navigation

<docs-table [columns]="keyboardColumns" [rows]="keyboardRows" />