4.71.1

Radio group

A compact single-select tray for switching between views or content states

Demo

const radioItems = [ { text: "Radio list", id: "view-list", classes: "icon-leading", iconName: "list", ariaLabel: "List view", selected: true }, { text: "Radio grid", id: "view-grid", classes: "icon-leading", iconName: "grid", ariaLabel: "Grid view" }, { text: "Radio map", id: "view-map", classes: "icon-leading", iconName: "map", ariaLabel: "Map view", disabled: true } ] const radiogroup = document.getElementById("demo-radiogroup"); radiogroup.radioItems = radioItems;

API

Tag

Name Description
<s-radiogroup> Custom HTML tag, no content

Attributes

Name Value Required Description
radioitems String

Stringified JSON array of radio items. See Guidelines below.
nodefaultselection Boolean

if not present, select the first radio item. Otherwise, leave all radio items unselected.

Properties

Name Value Required Description
radioItems Array

Array of radio objects. See Guidelines below.

noDefaultSelection Boolean

if not present, select the first radio item. Otherwise, leave all radio items unselected.

Events

Name Detail Description
s-select

The selected button's id is available on e.detail.

Fired after a button is selected.

Demo

API

Tag

Name
<SRadiogroup>

Props

Name Value Required Description
radioItems Array

Array of radio objects. See Guidelines below.
onS-select Function

Handles the s-select event fired when a radio button is selected. The button's id is available on e.detail.

Skylab React links

General information about using our React package

Typescript

Exported types

// Object provided (in array) to radioItems prop export type RadioItem = { iconName: string; id: string; classes: string; ariaLabel: string; text?: string; selected?: boolean; disabled?: boolean; }; // s-select event's e.detail export type SRadiogroupEventData = { id: string; };

Guidelines

Creating radio items

The radio buttons within the Radiogroup component are set via an array of objects.

const radioItems = [ { "id": string, // required "classes": string (space-separated class names), // required "iconName"?: string, "aria-label"?: string, // required for icon-only buttons "text"?: string // button text, if any "selected"?: boolean // use for default selection "disabled"?: boolean }, ]; const radiogroup = document.querySelector("s-radiogroup"); radiogroup.radioItems = radioItems;

To pass the radio items to the s-radiogroup component, you can either set the radioItems property equal to your array of objects, as in the code sample above, or you can stringify your array and set the radioitems attribute.

Radio group vs. segmented buttons

s-radiogroup is a compact, single-select tray with true radio-group semantics: the host gets role="radiogroup", each item gets role="radio" and aria-checked, and the group is a single tab stop navigated with the arrow keys (which both move focus and change the selection, wrapping at either end).

Use it as a lighter-weight alternative to tabs when switching between views or content states of the same content (e.g. "List" vs. "Grid"). For independent, related actions (e.g. "Save" and "Save as", or "Import" and "Export"), use <s-segmented-buttons> instead.

Appearance classes (primary, secondary, tertiary, ghost, ghost-blue, link, loading, small, large) on classes are ignored — the tray owns its own visual treatment. Icon-placement classes (icon, icon-leading, icon-trailing) and any other consumer classes still apply. A disabled item is skipped by arrow-key navigation and cannot be clicked, but stays visible and is announced as unavailable (via aria-disabled, not the native disabled attribute, so its existence remains discoverable to assistive technology).

Usage - table toolbar

Use this JSON to implement the row height selector radio group in the table toolbar:

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com