Checkbox Specification

igx-checkbox component provides capability make a binary choice for a certain condition.

Objectives

It is providing API for the most common use cases when it comes make a binary choice for a certain condition. It follows the native browser checkbox element and behaves in the same way.

<igx-checkbox [checked]="task.done" (change)="handler($event)">
    {{ task.description }}
</igx-checkbox>

User Stories

Developer

As a developer I want to be able to provide a way to make a binary choice (true or false). As a developer I want to be able to add description.

End user

The checkbox should provide a way to visualize certain state changes.

Acceptance criteria

1. Have toggle visual representation.
2. Have clickable box.
3. Have the ability to add description.

API

• Properties
• disabled - toggle element accessibility (enabled/disabled).
• checked - set initial checked state of the element (true).
• Events
• change - triggered on toggle state change of the element.
• focus - triggered on focus of the element (focus in).
• blur - triggered when focus is moved away from the element.

ARIA support

• Attributes
• aria-checked="checked" https://www.w3.org/TR/wai-aria/states_and_properties#aria-checked