Switch Specification

igx-switch component provides capability to make a binary choice of a single settings option.

Objectives

It is providing API for the most common use cases when it comes make a binary choice for a certain condition. Switch take on common visual properties of the radio button.

User Stories

Developer

As a developer I want to be able to provide a way to change make a binary choice (true or false). As a developer I want to be able to set default state of the switch (checked or not). As a developer I want to be able to add description.

<igx-switch [(ngModel)]="user.subscribed">
  Subscribed
</igx-switch>

Within form example:

<form (submit)="saveForm()">
    <div *ngFor="let item of order.items">
         <ig-switch [disabled]="order.completed || order.canceled"
             [checked]="order.completed"
             [(ngModel)]="item.completed">
             {{ item.description }}
         </ig-switch>
    </div>
</form>

End user

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

Acceptance criteria

1. Have toggle visual representation.
2. Have clickable button (circle form).
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

• Roles
• role = "checkbox" https://www.w3.org/TR/wai-aria/roles#checkbox
• Attributes
• aria-labeledby="labelId" https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby
• aria-checked="checked" https://www.w3.org/TR/wai-aria/states_and_properties#aria-checked