Web Components - Radio

A selection input with support for selection of multiple options.

Set-up

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

provideDesignSystem().register(alphaRadio());

Attributes

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

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
value	string	Sets a value for the component. Not visible to the user
readonly	boolean	If true, the user cannot change the value of this checkbox (which is greyed out)

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 the radio component changes 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

Example 1

<alpha-radio>Radio component</alpha-radio>

• Example 2: a radio component checked with a change event pointing to a function

Example 2

<alpha-radio checked="true" @change="${(x) => x.changeRadio()}">Radio</alpha-radio>

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 '@microsoft/fast-element';
...
export class TEMPLATE extends FASTElement {
...
@observable radioComponent: 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 :value="${sync((x) => x.radioComponent)}">Radio component</alpha-radio>
    ...
...    

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

tip

Once the radio has been checked, the user cannot uncheck it.

Try yourself

Live Editor

<div>
    <alpha-radio alpha-radio value="Try">Try</alpha-radio>
    <alpha-radio alpha-radio value="Your">Your</alpha-radio>
    <alpha-radio alpha-radio value="Self">Self</alpha-radio>
</div>

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