Radio Group Component - IgniteUI/igniteui-webcomponents GitHub Wiki
Contents
Owned by
Team Name: Design and Web Development (DnD)
Developer: Simeon Simeonoff
Designer: Stefan Ivanov
Requires approval from
- Diyan Dimitrov | Date:
- Stefan Ivanov | Date: 21 Jul 2021
Signed off by
- Product Owner: Radoslav Mirchev | Date:
- Radoslav Karaivanov | Date:
Revision History
Version | Users | Date | Notes |
---|---|---|---|
1 | Simeon Simeonoff | Date 26 Jul 2021 | Initial Proposal |
1. Overview
The igc-radio-group
component unifies one or more igc-radio
buttons. Radio buttons aren't useful on their own and are usually a part of a bigger unit or group (see igc-radio-group) of radio buttons.
Objectives
The radio group sets common properties on contained radio buttons. The radio group can also dictate the direction and input navigation of its children elements.
Acceptance criteria
- The radio group component should be able to work with elements of type
igc-radio
. - The radio group component should set the alignment for all contained radio buttons -
horizontal
orvertical
. - The radio group component should define input navigation and focus for all contained radio buttons.
2. User Stories
Developer stories
- As a developer, I want to be able to set the alignment for all radio buttons so that I can quickly change the direction of the group.
End-user stories
- As an end-user, I want to be able to navigate between radio buttons in a radio group using my keyboard and/or mouse.
- As an end-user, I want to be able to identify the currently focused radio button in a group.
3. Functionality
3.1. End-User Experience
The radio group is only metarepresentational in that it doesn't provide any visual clues as to whether radio buttons are wrapped within one or not. The radio group dictates the end-user behavior of all contained radio buttons.
3.2. Developer Experience
3.2.1 Standalone Usage:
<igc-radio-group alignment="horizontal">
...
</igc-radio-group>
3.3 API
3.3.1 Properties
You should be able to configure the igc-radio
by setting its properties:
Name | Description | Type | Default value | Reflected |
---|---|---|---|---|
alignment |
Sets the alignment for all radio buttons within the group. | vertical, horizontal | vertical |
true |
3.3.4 Slots
Name | Description |
---|---|
(default) | The default slot. |
4. Test Scenarios
TBD
5. Accessibility
N/A