Web Components - Radio group

As defined by the W3C:

A radio group is a set of checkable buttons known as radio buttons. No more than one button can be checked at a time. When a user checks an unchecked button, the previously checked button is automatically unchecked.

It is possible to initialise the set with all buttons in the unchecked state. This forces the user to check one of the buttons before moving past a certain point in the workflow.

While any DOM content is permissible as a child of the radio group, only alpha-radios and slotted content with a role of radio will receive keyboard support.

Set-up

import { provideDesignSystem, alphaRadioGroup, alphaRadio } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaRadioGroup(), alphaRadio());

Attributes

You can define the following attributes in an <alpha-radio-group>.

Name	Type	Description
checked	boolean	Sets or retrieves the current state of the component. Default: false
disabled	boolean	Similar to readonly, but with a blur on the component
name	string	Sets a name for the component
orientation	vertical or horizontal	Sets the orientation of the group of radios components. Default: horizontal
readonly	boolean	If true, the user cannot change the value of this checkbox (which is greyed out)
value	string	Sets a initial value for the component, so the corresponding radio component gets checked

These attributes must be defined alongside the declaration of the component.

Events

You can define the following events when using the alpha-radio component:

Name	Description
@change	Fires the event when a radio change its state

Usage

All examples below use the alpha-design-system. If you are using any other design system, change the declaration of this component accordingly.

• Example 1: simple implementation of a radio-group

Example 1

<alpha-radio-group>
    <alpha-radio value="apple">Apple</alpha-radio>
    <alpha-radio value="mango">Mango</alpha-radio>
    <alpha-radio value="orange">Orange</alpha-radio>
</alpha-radio-group>

• Example 2: a radio-group component initialized with "apple" value

Example 2

<alpha-radio-group value="apple">
    <alpha-radio value="apple">Apple</alpha-radio>
    <alpha-radio value="mango">Mango</alpha-radio>
    <alpha-radio value="orange">Orange</alpha-radio>
</alpha-radio-group>

Get the user input

Once the user has input a value to this component, you need to make it accessible to the application:

1. Create an @observable variable where you want to use this value:

import {... , observable} from '@genesislcap/web-core';
...
export class TEMPLATE extends GenesisElement {
...
@observable radioGroup: string;
...
}

2. Use the sync function to insert the value from the component into the variable checkbox:

import {sync} from '@genesislcap/foundation-utils';
...
    ...
        <alpha-radio-group :value="${sync((x) => x.radioGroup)}">
            <alpha-radio value="apple">Apple</alpha-radio>
            <alpha-radio value="mango">Mango</alpha-radio>
            <alpha-radio value="orange">Orange</alpha-radio>
        </alpha-radio-group>
    ...
...    

From this point, you can access the value of the component in your application.

Try yourself

Live Editor

<alpha-radio-group>
    <alpha-radio value="apple">Apple</alpha-radio>
    <alpha-radio value="mango">Mango</alpha-radio>
    <alpha-radio value="orange">Orange</alpha-radio>
</alpha-radio-group>

Result

Loading...

Use cases

Selecting multiple options in the same input: You could have a set of broker codes, for example, and the user could select one or more of those codes.

Additional resources

• W3C Component Aria Practices