HyToggleGroup

A form-associated container component that manages a group of toggle buttons. Provides centralized selection state management, keyboard navigation, accessibility features, and form integration via ElementInternals API.

Supports two selection modes:

• Single mode (default): Radio-group pattern — one toggle selected at a time. Arrow keys move focus and select. Uses role="radiogroup".
• Multiple mode: Toolbar pattern — multiple toggles can be selected. Arrow keys move focus only. Space/Enter toggles selection. Uses role="toolbar".

Form Integration

Implements Form-Associated Custom Elements API via ElementInternals. In single mode, submits a single string value. In multiple mode, submits pipe-delimited values (e.g. "bold|italic").

Keyboard Navigation

• Single mode: Arrow keys move focus and auto-select. Space selects focused item.
• Multiple mode: Arrow keys move focus only. Space/Enter toggles focused item.
• Home/End: Move focus to first/last item.
• Tab: Enters/exits the group (roving tabindex).

Examples

Basic single selection

<hy-toggle-group value="center" label="Text alignment">
  <hy-toggle value="left">Left</hy-toggle>
  <hy-toggle value="center">Center</hy-toggle>
  <hy-toggle value="right">Right</hy-toggle>
</hy-toggle-group>

Inline layout

<div style="--hy-toggle-group-label-column-width: 6rem;">
  <hy-toggle-group layout="inline" label="Alignment" value="left">
    <hy-toggle value="left">Left</hy-toggle>
    <hy-toggle value="center">Center</hy-toggle>
    <hy-toggle value="right">Right</hy-toggle>
  </hy-toggle-group>
</div>

Events

• change - Fired when selection changes. Detail: { selectedValues: string[], reason: 'user' | 'programmatic', name: string }
• input - Standard form input event

Slots

• default - hy-toggle elements

Methods

checkValidity()

Checks validity against constraints.

reportValidity()

Checks validity and shows browser validation UI if invalid.

setCustomValidity()

Sets a custom validation message.

focus()

Sets focus on the selected toggle, or the first toggle if none selected.