Skip to main content
Version: Current

Web Components - Radio

A selection input with support for selection of multiple options.


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



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

checkedbooleanSets or retrieves the current state of the component. Default: false
disabledbooleanSimilar to readonly, but with a blur on the component
valuestringSets a value for the component. Not visible to the user
readonlybooleanIf 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.


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

@changeFires the event when the radio component changes its state


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

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


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

Try yourself

Live Editor
    <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>

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