Holo Radio & Radio Group

<holo-radio-group> is a form-associated custom element that owns the selected value for a set of <holo-radio> children. It manages roving tabindex keyboard navigation (Arrow keys, Home, End) across its options, so only one radio is ever a tab stop at a time.

When to use

Use it for:

• Choosing exactly one option from a short set (roughly two to seven) where seeing every option helps.
• Settings that submit with a form.

Don’t use it for:

• Selecting several options. Use Checkbox.
• Long lists of options. Use Select.
• Instant on and off settings. Use Switch.

Live Previews

Default

<holo-radio-group label="Size" value="medium">
  <holo-radio value="small" label="Small"></holo-radio>
  <holo-radio value="medium" label="Medium"></holo-radio>
  <holo-radio value="large" label="Large"></holo-radio>
</holo-radio-group>

Disabled

<holo-radio-group label="Size" value="medium" disabled>
  <holo-radio value="small" label="Small"></holo-radio>
  <holo-radio value="medium" label="Medium"></holo-radio>
</holo-radio-group>

Accessibility

<holo-radio-group> sets role="radiogroup" on itself. It takes aria-label from label, and sets aria-required and aria-disabled from required and disabled. Each <holo-radio> sets role="radio" and aria-checked on itself, and aria-disabled when disabled. The visible circle is aria-hidden. The group is form-associated through ElementInternals: its value is the selected radio’s value, and required with nothing selected reports “Please select an option.”.

Key	Action
Tab	Moves focus into the group (to the checked radio, or the first if none) and out of it
ArrowDown, ArrowRight	Moves to the next enabled radio (wraps) and selects it
ArrowUp, ArrowLeft	Moves to the previous enabled radio (wraps) and selects it
Home	Moves to the first enabled radio and selects it
End	Moves to the last enabled radio and selects it
Space, Enter	Selects the focused radio

• Radios use roving tabindex: only one radio is a tab stop at a time.
• Disabled radios are skipped by the arrow keys, Home and End, and are never a tab stop.
• The checked circle shows a visible focus ring with :host(:focus-visible).

You provide:

• A label on <holo-radio-group> that names the question (“Delivery speed”). Without it the group has no accessible name.
• Visible text for each radio, through the label prop or slotted content.
• Radios inside a <holo-radio-group>. A standalone holo-radio has no roving tabindex and no group semantics.

---

API Reference

holo-radio-group

Importing

import '@philbob-sideprojects/hololink-ui/holo-radio-group';

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	If true, the entire group is disabled and non-interactive.
label	label	string	—	The accessible label describing the group of radio options.
name	name	string	—	The form field name submitted with the owning form.
required	required	boolean	false	If true, the owning form cannot submit unless a value is selected.
value	value	string	—	The value of the currently selected holo-radio child.

Events

Event	Detail	Description
holoChange	string	Emitted when the user selects a different option. detail is the new value.

Slots

Slot	Description
(default)	The holo-radio options.

CSS custom properties

Property	Description
--holo-radio-group-gap	Space between radio options.

holo-radio

Importing

import '@philbob-sideprojects/hololink-ui/holo-radio';

Properties

Property	Attribute	Type	Default	Description
checked	checked	boolean	false	Whether this radio is the selected option. Managed by the parent holo-radio-group — do not set directly in application code.
disabled	disabled	boolean	false	If true, this radio is disabled and non-interactive.
label	label	string	—	The visible label text for the radio option.
value (required)	value	string	—	The value this radio represents within its owning holo-radio-group.

Events

Event	Detail	Description
holoRadioSelect	string	Emitted (bubbles + composed) when the user activates this radio, so the owning holo-radio-group can update the selected value.

Slots

Slot	Description
(default)	Additional label content rendered after the label text.

CSS custom properties

Property	Description
--holo-radio-bg	Background color of the circle.
--holo-radio-border-color	Border color of the unselected circle.
--holo-radio-checked-color	Border and dot color of the selected circle.
--holo-radio-text-color	Text color of the label.