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.
Input props
CheckboxRoot Attribute directive
The root directive for the checkbox. Handles the state, keyboard navigation and bindings.
| Input | Default | Type | Required |
|---|---|---|---|
| checked | — | boolean | "indeterminate" | false |
| disabled | — | boolean | false |
| required | — | boolean | false |
| name | — | string | false |
| value | on | string | false |
| Output | Description | Returns |
|---|---|---|
| checkedChange | Event handler called when the state of the checkbox changes. | boolean | "indeterminate" |
| Attribute | Value |
|---|---|
| data-state | "checked" | "unchecked" | "indeterminate" |
| data-disabled | Shows when disabled |
CheckboxInput Attribute directive
A directive to bind the state and the accessibility rules to the input element.
| Attribute | Value |
|---|
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.
State API - CheckboxStateService
Documentation for the checkbox state service API.
Variables
| Name | Type | Default |
|---|---|---|
| checked | WritableSignal<boolean | "indeterminate"> | false |
| disabled | WritableSignal<boolean> | false |
| required | WritableSignal<boolean> | false |
| name | WritableSignal<string> | — |
| value | WritableSignal<string> | on |
Methods
| Method | Arguments | Return |
|---|---|---|
| toggleChecked | — | void |
Types/Interfaces
Avatar interfaces that you can import.
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
| Key | Description |
|---|---|
| Space | Toggle the checkbox. |