ba-radio-group

A container component for grouping multiple ba-radio and ba-radio-card components into a single form field, providing users with a clear choice of options

 Figma GitHub Storybook

Positioning ba-radio components after ba-radio-card components helps maintain a clear visual hierarchy, guiding users from options with more detailed descriptions to simpler choices. This layout improves usability and ensures a logical flow in the selection process.

The legend text helps users of assistive technologies understand that this component is a group of related form fields.

Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments

Further reading:

This attribute gives screen readers more information to read out to the user. A common pattern in forms is to change the UI depending on the selections users make or the data users enter. Providing some hidden text alongside the form element informs the user what will happen in response to their action.

Code

Properties & Attributes

Property Attribute Description Type Default
hintText hint-text Text to display between the legend and the radios string | undefined ''
invalid invalid Set the radio group to invalid state boolean | undefined false
layout1024vw layout-1024vw Controls the direction the radio buttons go. "grid-2" | "grid-3" | "horizontal" | "vertical" | undefined 'vertical'
legend (required) legend Sets the radio group legend which will fill the fieldset legend string undefined
name (required) name Input name to be applied to all radio children string undefined
required (required) required Set to trigger the is required validation boolean undefined
value value the value of the radio group. string | undefined ''
visuallyHiddenLegend visually-hidden-legend Sets the radio group visually hidden text which can be read out by screen readers to give added context on what the radio buttons will do string | undefined undefined

Events

Event Description Type
baChange Emitted when the value gets updated. CustomEvent<RadioGroupChangeEventDetail>

Methods

isValid() => Promise<boolean>

An exposed method for triggering the inputs required validation

reset() => Promise<void>

Resets the input back to its initial value

Returns

Type: Promise<void>

Slots

Slot Description Permitted elements
Unnamed slot ba-radio components will be rendered here <ba‑radio>, <ba‑radio‑card>
"error" Element will be rendered in the error slot <p>

Parent components

ba-radio-group can be slotted into:

Usage

Basic usage

In most scenarios, you will use ba-radio-group to group multiple ba-radio or ba-radio-card components together. This allows users to select a single option from a list of choices.

A list of ba-radio's used to select a flight
<ba-radio-group
    legend="Pick an option"
    name="groupName"
  >
  <ba-radio label="Flight 1" value="flight1"></ba-radio>
  <ba-radio label="Flight 2" value="flight2"></ba-radio>
  <ba-radio label="Flight 3" value="flight3"></ba-radio>

  <p slot="error">Custom required error message</p>
</ba-radio-group>
A list of ba-radio-cards used to select a flight with more details
<ba-radio-group
  legend="Pick an option"
  name="groupName"
>
  <ba-radio-card label="Flight 1" value="flight1">
    <ba-content>
      <p>Flight 1 description</p>
    </ba-content>
  </ba-radio-card>
  <ba-radio-card label="Flight 2" value="flight2">
    <ba-content>
      <p>Flight 2 description</p>
    </ba-content>
  </ba-radio-card>
  <ba-radio-card label="Flight 3" value="flight3">
    <ba-content>
      <p>Flight 3 description</p>
    </ba-content>
  </ba-radio-card>

</ba-radio-group>

Mixing ba-radio and ba-radio-card

In some cases, you may want to mix ba-radio and ba-radio-card components within the same ba-radio-group. This can be useful when you want to provide users with a mix of simple and detailed options.

A list of ba-radio-cards used to select a flight with more details
<ba-radio-group
  legend="Pick an option"
  name="groupName"
>
  <ba-radio-card label="Flight 1" value="flight1">
    <ba-content>
      <p>Flight 1 description</p>
    </ba-content>
  </ba-radio-card>
  <ba-radio-card label="Flight 2" value="flight2">
    <ba-content>
      <p>Flight 2 description</p>
    </ba-content>
  </ba-radio-card>
  <ba-radio label="Flight 3" value="flight3"></ba-radio>
  <ba-radio label="Flight 4" value="flight4"></ba-radio>

</ba-radio-group>

Use visually-hidden-label to make form changes predictable

A common pattern in forms is to change the UI depending on the selections users make or the data users enter. Providing some hidden text alongside the form element informs the user what will happen in response to their action

Further Reading:

A search form dynamically changes the inputs shown to the user depending on the radio button selection. Hidden text lets the screen reader user know this change will happen when they update their selection
<ba-radio-group label="Search by airport or flight number" visually-hidden-label="Changing this value will update the fields available in this form">

  <ba-radio>
    <span slot="label">Airport</span>
  </ba-radio>

  <ba-radio>
    <span slot="label">Flight number</span>
  </ba-radio>

  <div aria-live="polite">
    <!-- Dynamically added/removed form inputs -->
  </div>
</ba-radio-group>

Error messages

BAgel provides a translated required error message, however it is sometimes useful to add custom validation messages. For example you may wish to:

  • Add additional translations
  • Provide more detail and/or contextual advice
  • Add links to further information on the error
A radio group with a custom error message
<ba-radio-group label="Search by airport or flight number" required>
  <!-- Place ba-radio's and ba-rdaio-card's here -->

  <p slot="error">Custom error message</p>
</ba-radio-group>
GitHub Storybook Figma library Version 3 release guide Release history BAgel helper QA process