Checkbox Specification

Owned by

Team Name: Design and Web Development (DnD)

Developer: Silvia Ivanova

Designer: Stefan Ivanov

Requires approval from

Simeon Simeonov | Date:

Signed off by

Product Owner: Radoslav Mirchev | Date:
Radoslav Karaivanov | Date:

Revision History

Version	Users	Date	Notes
1	Zdravko Kolev	Date 18 Feb 2017	Initial spec

1. Overview

The <igc-checkbox> component is used to provide a capability for making a binary choice for a certain condition. It follows the native browser checkbox element and behaves in the same way.

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.label }}
</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

Have toggle visual representation.
Have clickable box.
Have the ability to add label.

API

Properties
- disabled - toggle element accessibility (enabled/disabled).
- checked - set initial checked state of the element (true).
- required - mark the checkbox form component as required.
- readonly - mark the checkbox form component as readonly.
- indeterminate - sets or returns whether the state of a checkbox has changed. Checkboxes actually has three states: true, false and indeterminate which indicates that a checkbox is neither "on" or "off".
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.