Skip to content

19h47/19h47-radiogroup

Folders and files

NameName
Last commit message
Last commit date
Feb 13, 2024
Mar 25, 2024
Oct 2, 2023
Sep 27, 2023
Feb 7, 2020
Oct 2, 2023
Apr 3, 2019
Jun 12, 2020
Oct 11, 2023
Oct 11, 2023
Mar 25, 2024
Jul 23, 2020
Oct 2, 2023
Feb 20, 2025

Repository files navigation

@19h47/radiogroup

Install

yarn add @19h47/radiogroup

Usage

HTML

<div role="radiogroup">
	<div aria-checked="true" tabindex="0" role="radio">
		<span>Option 1</span>
		<input
			id="option_1"
			type="radio"
			name="option"
			value="option_1"
			checked
			style="display: none;"
		/>
	</div>

	<div aria-checked="false" tabindex="-1" role="radio">
		<span>Option 2</span>
		<input type="radio" id="option_2" name="option" value="option_2" style="display: none;" />
	</div>
</div>

JavaScript

import RadioGroup from '@19h47/radiogroup';

const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);

radiogroup.init();

Keyboard Support

Key Function
Tab
  • Moves keyboard focus to the checked radio button in a radiogroup.
  • If no radio button is checked, focus moves to the first radio button in the group.
Down arrow
  • Moves focus to next radio button in the group.
  • If focus is on the last radio button in the group, move focus to the first radio button.
Home Move to first input.
Up arrow
  • Moves focus to previous radio button in the group.
  • If focus is on the first radio button in the group, move focus to the last radio button.
End Move to last input.
Space If the radio button with focus is unchecked, it's state will be changed to checked.

ARIA Roles, Properties and States

Role Property/State Usage
radiogroup
  • The role="radiogroup" attribute identifies the div element as a container for a group of radio buttons.
  • The descendent radio buttons are considered part of the group.
  • The accessible name comes the aria-labelledby attribute, which points to the element that contains the label text.
  • The radiogroup widget does not need a tabindex value, since the ul[role"radiogroup"] element never receives keyboard focus.
radio aria-checked Indicate state of radio:
  • Checked (e.g. aria-checked=true)
  • Unchecked (e.g. aria-checked=false)
aria-labelledby Used to identify radio group

Events

Event Name Description
Radio.activate Return an event object containing detail object (current element and current value)
Radio.deactivate Return an event object containing detail object (current element and current value)
import RadioGroup from '@19h47/radiogroup';

const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);

radiogroup.init();

radiogroup.radios.forEach(radio => {
	radio.el.addEventListener('Radio.activate', ({ detail }) => {
		console.log(detail.element, detail.value);
	});

	radio.el.addEventListener('Radio.deactivate', ({ detail }) => {
		console.log(detail.element, detail.value);
	});
});

Options

Option Type Default description
tagger array []
template function () => {}
name string ''

RadioGroup Methods

Method Description Arguments
init()
destroy()

Radio Methods

Method Description Arguments
activate() Active a given radio
  • shouldFocus (optional)
  • Default to true
deactivate()
destroy()

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn serve

# build for development
$ yarn dev

# build for production
$ yarn build

References