Radio Specification

igx-radio component renders set of radio buttons.

Objectives

It is providing API for the most common use cases when it comes to select just one option from set of available options.

User Stories

Developer

As a developer I want to be able to provide a way to customize and apply properties to a radio component.

<igx-radio *ngFor="let item of ['Foo', 'Bar', 'Baz']" 
    value="{{item}}" name="group" 
    [(ngModel)]="user.favouriteVarName">{{item}}
</igx-radio>

Attaching change event example:

<igx-radio
    value="{{user.id}}"
    tabIndex="50"
    (change)="doAlert($event)"
    (focus)="doAlert($event)"
    (blur)="doAlert($event)"
    [(ngModel)]="user.favouriteVarName">
    {{user.name}}
</igx-radio>

End user

I want to be able to allow the user to select one option from a set.

Acceptance criteria

1. Have multiple radio buttons.
2. Be able to choose only one option.
3. Handle events like change, focus, blur and checked.

API

• Properties
• disabled - toggle element accessibility (enabled/disabled).
• checked - set initial checked state of the element (true).
• Events
• change - triggered on change 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