← →

Toggle Group

Toggle Group is a native web component that groups several `<pura-toggle>` elements into a segmented control. Use "single" mode for an exclusive choice (radio style) or "multiple" to select several options at once. It supports horizontal or vertical orientation and arrow-key keyboard navigation (roving focus).

Preview

<!-- Single selection (radio style) -->
<pura-toggle-group type="single" value="medio">
  <pura-toggle value="baixo">Low</pura-toggle>
  <pura-toggle value="medio">Medium</pura-toggle>
  <pura-toggle value="alto">High</pura-toggle>
</pura-toggle-group>

<!-- Multiple selection -->
<pura-toggle-group type="multiple">
  <pura-toggle value="negrito" pressed>Bold</pura-toggle>
  <pura-toggle value="italico">Italic</pura-toggle>
  <pura-toggle value="sublinhado">Underline</pura-toggle>
</pura-toggle-group>

<!-- Vertical orientation -->
<pura-toggle-group type="single" orientation="vertical" value="lista">
  <pura-toggle value="lista">List</pura-toggle>
  <pura-toggle value="grade">Grid</pura-toggle>
  <pura-toggle value="tabela">Table</pura-toggle>
</pura-toggle-group>

<script type="module">
  const group = document.querySelector('pura-toggle-group[type="multiple"]');
  group.addEventListener('change', (e) => {
    // single: string | null  |  multiple: array of values
    console.log(e.detail.value, e.detail.type);
  });
</script>

Attributes

Attribute	Type	Default	Description
`type`	string	multiple	'single' allows an exclusive choice (radio style); 'multiple' (default) allows several selections.
`value`	string	—	In single mode, reflects the value of the pressed toggle; set it to pre-select. In multiple mode, read the .value property to get the array.
`disabled`	boolean	false	Disables the entire group, preserving each toggle's individual disabled state.
`orientation`	string	horizontal	'horizontal' (default) or 'vertical'; controls layout and the direction of the navigation arrows.
`pressed`	boolean	false	Attribute on the child <pura-toggle>: indicates whether it is pressed/active.
`value (pura-toggle)`	string	textContent	Attribute on the child <pura-toggle>: value associated with the toggle; falls back to the inner text if absent.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/toggle-group.js"></script>

JavaScript

import "./pura/lib/toggle-group.js";

Slots

default

Events

change