4.32.2

Radio group

A group of buttons with radio behavior

Demo

const radioItems = [ { iconName: "arrow-up", id: "button-up", classes: "icon ghost", ariaLabel: "Select up" }, { iconName: "arrow-right", id: "button-right", classes: "icon ghost", ariaLabel: "Select right", }, { iconName: "arrow-down", id: "button-down", classes: "icon ghost", ariaLabel: "Select down" } ] 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; }; // 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 }, ]; 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.

No primary buttons

Buttons with the primary class are not intended to be used in this component, as they do not have active styling.

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