Skip to main content
Version: Current

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

NameTypeDescription
checkedbooleanSets or retrieves the current state of the component. Default: false
disabledbooleanSimilar to readonly, but with a blur on the component
namestringSets a name for the component
orientationvertical or horizontalSets the orientation of the group of radios components. Default: horizontal
readonlybooleanIf true, the user cannot change the value of this checkbox (which is greyed out)
valuestringSets 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:

NameDescription
@changeFires 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 '@microsoft/fast-element';
...
export class TEMPLATE extends FASTElement {
...
@observable radioGroup: string;
...
}
  1. 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
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