Skip to content

Radio Group Component

Radoslav Karaivanov edited this page Jun 18, 2024 · 7 revisions

Radio group component specification

Owned By

Team Name: Design and Web Development

Developer name: Simeon Simeonoff

Designer name: 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 2021-07-26 Initial Proposal
2 Radoslav Karaivanov 2024-06-18 Added name and value properties

Overview

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.

Acceptance criteria

The igc-radio-group must:

  • be able
  • be WAI-ARIA compliant.

User stories

End-user stories

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.

Developer stories

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.

Functionality

End-user experience

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]

Developer experience

Behaviors

  • 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.

Default initialization

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>

Initial checked state

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>

Child radio component with initial checked state

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>

Localization

None applicable.

Keyboard navigation

The keyboard navigation is already handled by the igc-radio component itself.

API

Properties

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.

Methods

None applicable.

Events

None applicable.

Slots

Name Description
default Default slot for the igc-radio-group.

CSS Shadow Parts

None applicable.

CSS Variables

None applicable.

Test scenarios

Automation

  1. Is initialized with sensible defaults.
  2. Passes automatic WAI-ARIA checks.
  3. Setting the name property correctly overwrites radio children name properties.
  4. Setting the value property correctly sets the checked state of radio child which value matches that property.
  5. The value property reflects the value of the currently checked radio child.
  6. On initial render, a checked radio child takes precedence over the value property of the group.

Accessibility

ARIA

The igc-radio-group has an intrinsic role of radiogroup.

RTL

The component should work in a Right-To-Left context without additional setup or configuration.

Assumptions and limitations

  • 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.
Clone this wiki locally