-
Notifications
You must be signed in to change notification settings - Fork 4
Radio Group Component
- Radio group component specification
Team Name: Design and Web Development
Developer name: Simeon Simeonoff
Designer name: Stefan Ivanov
- Diyan Dimitrov | Date:
- Stefan Ivanov | Date: 21 Jul 2021
- Product Owner: Radoslav Mirchev | Date:
- Radoslav Karaivanov | Date:
Version | Users | Date | Notes |
---|---|---|---|
1 | Simeon Simeonoff | 2021-07-26 | Initial Proposal |
2 | Radoslav Karaivanov | 2024-06-18 | Added name and value properties |
The igc-radio-group
component unifies one or more igc-radio
buttons. Besides acting as a layout and logical container
for any radio components, it also supports setting properties on its children for easier configuration.
The igc-radio-group
must:
- be able
- be WAI-ARIA compliant.
As an end-user I expect to be able to:
- navigate between radio buttons in a radio group using my keyboard and/or mouse.
- identify the currently focused radio button in a group.
As a developer I expect to be able to:
- control the alignment and layout of the radios within the radio group.
- get/set a name property that is distributed among the radio children to simplify configuration in form submission scenarios.
- get/set a value property to facilitate interaction with the provided radios.
The radio group is only meta representational in that it doesn't provide any visual clues as to whether radio buttons are wrapped within one or not.
[Design Handoff]
- Setting a non-empty name property will always overwrite the respective name properties of the child radios.
- During initial rendering, the group will not update its children based its value property, if any child has an initial checked attribute present.
A radio group that sets the default name attribute for its children.
<label for="contact-method">Please select your preferred contact method</label>
<igc-radio-group id="contact-method" name="contact">
<igc-radio value="email">Email</igc-radio>
<igc-radio value="phone">Phone</igc-radio>
<igc-radio value="mail">Mail</igc-radio>
</igc-radio-group>
A vertical oriented radio group that sets the default name attribute for its children and checks the radio with "email" as a value.
<label for="contact-method">Please select your preferred contact method</label>
<igc-radio-group
id="contact-method"
alignment="vertical"
name="contact"
value="email"
>
<igc-radio value="email">Email</igc-radio>
<igc-radio value="phone">Phone</igc-radio>
<igc-radio value="mail">Mail</igc-radio>
</igc-radio-group>
If there is a radio child with initial checked state on initialization the group will skip setting its value. This is a one-time initialization behavior.
<label for="contact-method">Please select your preferred contact method</label>
<igc-radio-group id="contact-method" name="contact" value="email">
<igc-radio value="email">Email</igc-radio>
<igc-radio value="phone" checked>Phone</igc-radio>
<igc-radio value="mail">Mail</igc-radio>
</igc-radio-group>
None applicable.
The keyboard navigation is already handled by the igc-radio
component itself.
Property | Attribute | Reflected | Property Type | Default | Description |
---|---|---|---|---|---|
alignment | alignment | Yes | 'horizontal' | 'vertical' | vertical | Alignment of the radio controls inside this group. |
name | name | Yes | string | - | Gets/Sets the name for all child igc-radio components. |
value | value | No | string | - | Gets/Sets the checked igc-radio element that matches value . |
None applicable.
None applicable.
Name | Description |
---|---|
default | Default slot for the igc-radio-group . |
None applicable.
None applicable.
- Is initialized with sensible defaults.
- Passes automatic WAI-ARIA checks.
- Setting the name property correctly overwrites radio children name properties.
- Setting the value property correctly sets the checked state of radio child which value matches that property.
- The value property reflects the value of the currently checked radio child.
- On initial render, a checked radio child takes precedence over the value property of the group.
The igc-radio-group
has an intrinsic role of radiogroup
.
The component should work in a Right-To-Left context without additional setup or configuration.
- It is recommended to avoid mutating state between the radio group and its radio children. Either control the children through the group or react to individual changes of the radios separately.