Radio Button

Example

<vega-radio-group 
  name="fruit" 
  value="apple" 
  label="Select a fruit"
>
  <vega-radio value="apple">
    Apple
  </vega-radio>
  <vega-radio value="orange">
    Orange
  </vega-radio>
</vega-radio-group>

const radios = document.querySelector("vega-radio-group");
radios.vegaFlexProp = {
  gap: "size-8",
  direction: "col",
  breakpoint: "None",
  alignItem: "start",
  justifyContent: "start",
  margin: "0",
};

Note: The above example uses Vanilla JS. If you would like to use React, Angular, or Vue, please consult Storybook.

Usage

The vega-radio component provides a selection field on a form where only one item may be selected. There are two main tokens: vega-radio-group, which specifies the grouping of the options, and vega-radio, which refers to the individual selection options.

Radio (vega-radio) Properties

Radio (vega-radio-group) Properties

Example setup

<vega-radio-group onVegaChange="function">
  <vega-radio name="xxx" value="xxx" checked="true|false">Label</vega-radio>
  <vega-radio name="xxx" value="xxx">Label</vega-radio>
  ... ...
  <vega-radio-group></vega-radio-group
></vega-radio-group>

You can modify various flex attributes such as gap, direction, breakpoint, alignment, justification, and margin using the vegaFlexProp object on the vega-radio-group element. For example, to change the display direction of the radio group, change the direction from row to col.

const radios = document.querySelector('vega-radio-group');
radios.vegaFlexProp = {
    gap: 'size-8',
    direction: 'col',
    breakpoint: 'None',
    alignItem: 'start',
    justifyContent: 'start',
    margin: '0',
};

Defining a selected radio button

To choose which radio button is selected through vega-checkbox-group, you will need to set the value atttribute to be the specific radio.

For example:

document.querySelector('vega-radio-group').value = ['apple'];

Alternately, you can set the checked property for the individual vega-radio to be true.

Getting the value of a selected radio button

To retrieve the value of a selected radio, you can use either of the following two methods:

1. Retrieve it from the value attribute of vega-radioo-group:

var group = document.getElementById('radio-group-id');
console.log(group.value);

2. Retrieve it directly from the value of the selected radio button.

document.querySelector('input[name=xxx]:checked').value;

Events

The following events are available in vega-radio or vega-radio-group:

• onVegaChange: dispatched when a radio button is checked.

document.getElementById("radio_group_id").addEventListener("vegaChange", (e) =>
{console.log(e.currentTarget.value) }) document.getElementById("radio_id").addEventListener("vegaChange",
(e)=> { console.log(e.currentTarget.value) })

• onVegaFocus: dispatched when a radio button is focused. It can be applied to either vega-radio or vega-radio-group.

document.getElementById("radio_group_id").addEventListener("vegaFocus", (e)
=>{console.log(e.currentTarget.value) }) document.getElementById("radio_id").addEventListener("vegaFocus",
(e)=> { console.log(e.currentTarget.value) })

• onVegaBlur: dispatched when a radio button is unchecked.

document.getElementById("radio_group_id").addEventListener("vegaBlur", (e)
=>{console.log(e.currentTarget.value) }) document.getElementById("radio_id").addEventListener("vegaBlur", (e)
=>{ console.log(e.currentTarget.value) })

For more details, including examples for React or view in Storybook.

Accessibility

• Ensures ARIA attributes are allowed for an element’s role.
• Ensures all ARIA attributes have valid values.
• Ensures attributes that begin with aria- are valid ARIA attributes
• Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
• Ensures every id attribute value is unique.
• Ensures form field does not have multiple label elements.
• Ensures that every form element is not solely labeled using the title or aria-describedby attributes.
• Ensures every form element has a label.
• Nested interactive controls are not announced by screen readers.

Best Practices

• Radio buttons should only be used if a choice must be made between two or more options, and only one option can be chosen. If there is only one option, use either a checkbox or an item toggle instead.
• Labels should be explicitly associated with each radio button; clicking on the label should result in the radio button itself being selected.
• Use vertical lists of radio buttons to make it easier to know which radio button is associated with a label.

Do

Don't

• Radio buttons should be considered to be better to use than drop-down select menus, at least if there is a limited number of selections.
• Always set one of the values as selected as a default.
• Since radio buttons allow one and only one choice, make sure that the descriptions of the options are clearly distinct from each other, where there is no ambiguity.
• Use radio buttons for changing settings only, and never as an action item.