Actions

Toggle Group

A named set of toggles where one option, or several, can be on.

Class name	Type	Description
`joinplf:join`	Component	Joins the items into one control
`join-itemplf:join-item`	Part	A joined Toggle
`join-verticalplf:join-vertical`	Direction	Stacks the items

Default

<div class="flex flex-wrap gap-2" role="group" aria-label="Text alignment" data-plf-toggle-group>
  <button class="btn btn-ghost btn-square" value="start" aria-pressed="true" aria-label="Align start">
    <span class="icon icon-align-left"></span>
  </button>
  <button class="btn btn-ghost btn-square" value="center" aria-label="Align center">
    <span class="icon icon-align-center"></span>
  </button>
  <button class="btn btn-ghost btn-square" value="end" aria-label="Align end">
    <span class="icon icon-align-right"></span>
  </button>
</div>

<div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Text alignment" data-plf-toggle-group>
  <button class="plf:btn plf:btn-ghost plf:btn-square" value="start" aria-pressed="true" aria-label="Align start">
    <span class="plf:icon plf:icon-align-left"></span>
  </button>
  <button class="plf:btn plf:btn-ghost plf:btn-square" value="center" aria-label="Align center">
    <span class="plf:icon plf:icon-align-center"></span>
  </button>
  <button class="plf:btn plf:btn-ghost plf:btn-square" value="end" aria-label="Align end">
    <span class="plf:icon plf:icon-align-right"></span>
  </button>
</div>

import { Icon, ToggleGroup, ToggleGroupItem } from '@pelatform/react';

export function Example() {
  return (
    <ToggleGroup className="flex flex-wrap gap-2" aria-label="Text alignment" defaultValue="start">
      <ToggleGroupItem shape="square" value="start" aria-label="Align start">
        <Icon name="align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem shape="square" value="center" aria-label="Align center">
        <Icon name="align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem shape="square" value="end" aria-label="Align end">
        <Icon name="align-right" />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

import { Icon, ToggleGroup, ToggleGroupItem } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <ToggleGroup className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Text alignment" defaultValue="start">
      <ToggleGroupItem shape="square" value="start" aria-label="Align start">
        <Icon name="align-left" />
      </ToggleGroupItem>
      <ToggleGroupItem shape="square" value="center" aria-label="Align center">
        <Icon name="align-center" />
      </ToggleGroupItem>
      <ToggleGroupItem shape="square" value="end" aria-label="Align end">
        <Icon name="align-right" />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Name the group with aria-label or aria-labelledby, give each item a unique value, and leave data-plf-toggle off the items; otherwise the group gets no behavior.

Multiple

<div class="flex flex-wrap gap-2" role="group" aria-label="Text formatting" data-plf-toggle-group="multiple">
  <button class="btn btn-outline btn-square" value="bold" aria-pressed="true" aria-label="Bold">
    <span class="icon icon-bold"></span>
  </button>
  <button class="btn btn-outline btn-square" value="italic" aria-pressed="true" aria-label="Italic">
    <span class="icon icon-italic"></span>
  </button>
  <button class="btn btn-outline btn-square" value="underline" aria-label="Underline">
    <span class="icon icon-underline"></span>
  </button>
</div>

<div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Text formatting" data-plf-toggle-group="multiple">
  <button class="plf:btn plf:btn-outline plf:btn-square" value="bold" aria-pressed="true" aria-label="Bold">
    <span class="plf:icon plf:icon-bold"></span>
  </button>
  <button class="plf:btn plf:btn-outline plf:btn-square" value="italic" aria-pressed="true" aria-label="Italic">
    <span class="plf:icon plf:icon-italic"></span>
  </button>
  <button class="plf:btn plf:btn-outline plf:btn-square" value="underline" aria-label="Underline">
    <span class="plf:icon plf:icon-underline"></span>
  </button>
</div>

import { Icon, ToggleGroup, ToggleGroupItem } from '@pelatform/react';

export function Example() {
  return (
    <ToggleGroup type="multiple" className="flex flex-wrap gap-2" aria-label="Text formatting" defaultValue={['bold', 'italic']}>
      <ToggleGroupItem variant="outline" shape="square" value="bold" aria-label="Bold">
        <Icon name="bold" />
      </ToggleGroupItem>
      <ToggleGroupItem variant="outline" shape="square" value="italic" aria-label="Italic">
        <Icon name="italic" />
      </ToggleGroupItem>
      <ToggleGroupItem variant="outline" shape="square" value="underline" aria-label="Underline">
        <Icon name="underline" />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

import { Icon, ToggleGroup, ToggleGroupItem } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <ToggleGroup type="multiple" className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Text formatting" defaultValue={['bold', 'italic']}>
      <ToggleGroupItem variant="outline" shape="square" value="bold" aria-label="Bold">
        <Icon name="bold" />
      </ToggleGroupItem>
      <ToggleGroupItem variant="outline" shape="square" value="italic" aria-label="Italic">
        <Icon name="italic" />
      </ToggleGroupItem>
      <ToggleGroupItem variant="outline" shape="square" value="underline" aria-label="Underline">
        <Icon name="underline" />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Connected

<div class="join" role="group" aria-label="Period" data-plf-toggle-group>
  <button class="btn btn-outline join-item" value="day" aria-pressed="true">Day</button>
  <button class="btn btn-outline join-item" value="week">Week</button>
  <button class="btn btn-outline join-item" value="month">Month</button>
</div>

<div class="plf:join" role="group" aria-label="Period" data-plf-toggle-group>
  <button class="plf:btn plf:btn-outline plf:join-item" value="day" aria-pressed="true">Day</button>
  <button class="plf:btn plf:btn-outline plf:join-item" value="week">Week</button>
  <button class="plf:btn plf:btn-outline plf:join-item" value="month">Month</button>
</div>

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react';

export function Example() {
  return (
    <ToggleGroup join aria-label="Period" defaultValue="day">
      <ToggleGroupItem variant="outline" value="day">Day</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="week">Week</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="month">Month</ToggleGroupItem>
    </ToggleGroup>
  );
}

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <ToggleGroup join aria-label="Period" defaultValue="day">
      <ToggleGroupItem variant="outline" value="day">Day</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="week">Week</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="month">Month</ToggleGroupItem>
    </ToggleGroup>
  );
}

Sizes

<div class="flex flex-wrap gap-2" role="group" aria-label="Small group" data-plf-toggle-group>
  <button class="btn btn-outline btn-sm" value="one" aria-pressed="true">One</button>
  <button class="btn btn-outline btn-sm" value="two">Two</button>
</div>
<div class="flex flex-wrap gap-2" role="group" aria-label="Default group" data-plf-toggle-group>
  <button class="btn btn-outline" value="one" aria-pressed="true">One</button>
  <button class="btn btn-outline" value="two">Two</button>
</div>
<div class="flex flex-wrap gap-2" role="group" aria-label="Large group" data-plf-toggle-group>
  <button class="btn btn-outline btn-lg" value="one" aria-pressed="true">One</button>
  <button class="btn btn-outline btn-lg" value="two">Two</button>
</div>

<div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Small group" data-plf-toggle-group>
  <button class="plf:btn plf:btn-outline plf:btn-sm" value="one" aria-pressed="true">One</button>
  <button class="plf:btn plf:btn-outline plf:btn-sm" value="two">Two</button>
</div>
<div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Default group" data-plf-toggle-group>
  <button class="plf:btn plf:btn-outline" value="one" aria-pressed="true">One</button>
  <button class="plf:btn plf:btn-outline" value="two">Two</button>
</div>
<div class="plf:flex plf:flex-wrap plf:gap-2" role="group" aria-label="Large group" data-plf-toggle-group>
  <button class="plf:btn plf:btn-outline plf:btn-lg" value="one" aria-pressed="true">One</button>
  <button class="plf:btn plf:btn-outline plf:btn-lg" value="two">Two</button>
</div>

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react';

export function Example() {
  return (
    <>
      <ToggleGroup className="flex flex-wrap gap-2" aria-label="Small group" defaultValue="one">
        <ToggleGroupItem variant="outline" size="sm" value="one">One</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="sm" value="two">Two</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup className="flex flex-wrap gap-2" aria-label="Default group" defaultValue="one">
        <ToggleGroupItem variant="outline" value="one">One</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="two">Two</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup className="flex flex-wrap gap-2" aria-label="Large group" defaultValue="one">
        <ToggleGroupItem variant="outline" size="lg" value="one">One</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="lg" value="two">Two</ToggleGroupItem>
      </ToggleGroup>
    </>
  );
}

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <ToggleGroup className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Small group" defaultValue="one">
        <ToggleGroupItem variant="outline" size="sm" value="one">One</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="sm" value="two">Two</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Default group" defaultValue="one">
        <ToggleGroupItem variant="outline" value="one">One</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="two">Two</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup className="plf:flex plf:flex-wrap plf:gap-2" aria-label="Large group" defaultValue="one">
        <ToggleGroupItem variant="outline" size="lg" value="one">One</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="lg" value="two">Two</ToggleGroupItem>
      </ToggleGroup>
    </>
  );
}

Vertical

<div class="inline-flex flex-col gap-2" role="group" aria-label="Vertical group" data-plf-toggle-group>
  <button class="btn btn-outline" value="one" aria-pressed="true">Item one</button>
  <button class="btn btn-outline" value="two">Item two</button>
  <button class="btn btn-outline" value="three">Item three</button>
</div>
<div class="join join-vertical" role="group" aria-label="Connected vertical group" data-plf-toggle-group>
  <button class="btn btn-outline join-item" value="one" aria-pressed="true">Item one</button>
  <button class="btn btn-outline join-item" value="two">Item two</button>
  <button class="btn btn-outline join-item" value="three">Item three</button>
</div>

<div class="plf:inline-flex plf:flex-col plf:gap-2" role="group" aria-label="Vertical group" data-plf-toggle-group>
  <button class="plf:btn plf:btn-outline" value="one" aria-pressed="true">Item one</button>
  <button class="plf:btn plf:btn-outline" value="two">Item two</button>
  <button class="plf:btn plf:btn-outline" value="three">Item three</button>
</div>
<div class="plf:join plf:join-vertical" role="group" aria-label="Connected vertical group" data-plf-toggle-group>
  <button class="plf:btn plf:btn-outline plf:join-item" value="one" aria-pressed="true">Item one</button>
  <button class="plf:btn plf:btn-outline plf:join-item" value="two">Item two</button>
  <button class="plf:btn plf:btn-outline plf:join-item" value="three">Item three</button>
</div>

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react';

export function Example() {
  return (
    <>
      <ToggleGroup className="inline-flex flex-col gap-2" aria-label="Vertical group" defaultValue="one">
        <ToggleGroupItem variant="outline" value="one">Item one</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="two">Item two</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="three">Item three</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup join orientation="vertical" aria-label="Connected vertical group" defaultValue="one">
        <ToggleGroupItem variant="outline" value="one">Item one</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="two">Item two</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="three">Item three</ToggleGroupItem>
      </ToggleGroup>
    </>
  );
}

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <ToggleGroup className="plf:inline-flex plf:flex-col plf:gap-2" aria-label="Vertical group" defaultValue="one">
        <ToggleGroupItem variant="outline" value="one">Item one</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="two">Item two</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="three">Item three</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup join orientation="vertical" aria-label="Connected vertical group" defaultValue="one">
        <ToggleGroupItem variant="outline" value="one">Item one</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="two">Item two</ToggleGroupItem>
        <ToggleGroupItem variant="outline" value="three">Item three</ToggleGroupItem>
      </ToggleGroup>
    </>
  );
}

Disabled

<div class="join" role="group" aria-label="Disabled item" data-plf-toggle-group>
  <button class="btn btn-outline join-item" value="one" aria-pressed="true">One</button>
  <button class="btn btn-outline join-item" value="two">Two</button>
  <button class="btn btn-outline join-item" value="three" disabled>Three</button>
</div>

<div class="plf:join" role="group" aria-label="Disabled item" data-plf-toggle-group>
  <button class="plf:btn plf:btn-outline plf:join-item" value="one" aria-pressed="true">One</button>
  <button class="plf:btn plf:btn-outline plf:join-item" value="two">Two</button>
  <button class="plf:btn plf:btn-outline plf:join-item" value="three" disabled>Three</button>
</div>

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react';

export function Example() {
  return (
    <ToggleGroup join aria-label="Disabled item" defaultValue="one">
      <ToggleGroupItem variant="outline" value="one">One</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="two">Two</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="three" disabled>Three</ToggleGroupItem>
    </ToggleGroup>
  );
}

import { ToggleGroup, ToggleGroupItem } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <ToggleGroup join aria-label="Disabled item" defaultValue="one">
      <ToggleGroupItem variant="outline" value="one">One</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="two">Two</ToggleGroupItem>
      <ToggleGroupItem variant="outline" value="three" disabled>Three</ToggleGroupItem>
    </ToggleGroup>
  );
}

Filter a list

The script shows the projects whose data-status matches the pressed item, and all of them when none is pressed.

Website redesign

Due March 14

Active
Mobile app

Due April 2

Active
Brand guidelines

Finished January 20

Archived

<div class="flex flex-col gap-4">
  <div class="join" role="group" aria-label="Show projects" data-plf-toggle-group id="toggle-group-filter">
    <button class="btn btn-outline btn-sm join-item" value="all" aria-pressed="true">All</button>
    <button class="btn btn-outline btn-sm join-item" value="active">Active</button>
    <button class="btn btn-outline btn-sm join-item" value="archived">Archived</button>
  </div>
  <ul class="flex flex-col gap-2" role="list" id="toggle-group-projects">
    <li class="item" data-status="active">
      <div class="item-content">
        <p class="item-title">Website redesign</p>
        <p class="item-description">Due March 14</p>
      </div>
      <span class="badge">Active</span>
    </li>
    <li class="item" data-status="active">
      <div class="item-content">
        <p class="item-title">Mobile app</p>
        <p class="item-description">Due April 2</p>
      </div>
      <span class="badge">Active</span>
    </li>
    <li class="item" data-status="archived">
      <div class="item-content">
        <p class="item-title">Brand guidelines</p>
        <p class="item-description">Finished January 20</p>
      </div>
      <span class="badge">Archived</span>
    </li>
  </ul>
</div>
<script>
  document.getElementById('toggle-group-filter').addEventListener('plf:toggle-group:change', (event) => {
    const [status = 'all'] = event.detail.value;
    for (const project of document.querySelectorAll('#toggle-group-projects > li')) {
      project.hidden = status !== 'all' && project.dataset.status !== status;
    }
  });
</script>

<div class="plf:flex plf:flex-col plf:gap-4">
  <div class="plf:join" role="group" aria-label="Show projects" data-plf-toggle-group id="toggle-group-filter">
    <button class="plf:btn plf:btn-outline plf:btn-sm plf:join-item" value="all" aria-pressed="true">All</button>
    <button class="plf:btn plf:btn-outline plf:btn-sm plf:join-item" value="active">Active</button>
    <button class="plf:btn plf:btn-outline plf:btn-sm plf:join-item" value="archived">Archived</button>
  </div>
  <ul class="plf:flex plf:flex-col plf:gap-2" role="list" id="toggle-group-projects">
    <li class="plf:item" data-status="active">
      <div class="plf:item-content">
        <p class="plf:item-title">Website redesign</p>
        <p class="plf:item-description">Due March 14</p>
      </div>
      <span class="plf:badge">Active</span>
    </li>
    <li class="plf:item" data-status="active">
      <div class="plf:item-content">
        <p class="plf:item-title">Mobile app</p>
        <p class="plf:item-description">Due April 2</p>
      </div>
      <span class="plf:badge">Active</span>
    </li>
    <li class="plf:item" data-status="archived">
      <div class="plf:item-content">
        <p class="plf:item-title">Brand guidelines</p>
        <p class="plf:item-description">Finished January 20</p>
      </div>
      <span class="plf:badge">Archived</span>
    </li>
  </ul>
</div>
<script>
  document.getElementById('toggle-group-filter').addEventListener('plf:toggle-group:change', (event) => {
    const [status = 'all'] = event.detail.value;
    for (const project of document.querySelectorAll('#toggle-group-projects > li')) {
      project.hidden = status !== 'all' && project.dataset.status !== status;
    }
  });
</script>

'use client';

import { useState } from 'react';
import { Badge, itemClass, ItemContent, ItemDescription, ToggleGroup, ToggleGroupItem } from '@pelatform/react';

const projects = [
  { title: 'Website redesign', description: 'Due March 14', status: 'Active' },
  { title: 'Mobile app', description: 'Due April 2', status: 'Active' },
  { title: 'Brand guidelines', description: 'Finished January 20', status: 'Archived' },
];

export function Example() {
  const [status, setStatus] = useState('all');
  // With no item pressed, every project shows, as with All.
  const shown = projects.filter(project => !status || status === 'all' || project.status.toLowerCase() === status);

  return (
    <div className="flex flex-col gap-4">
      <ToggleGroup join aria-label="Show projects" value={status} onValueChange={setStatus}>
        <ToggleGroupItem variant="outline" size="sm" value="all">All</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="sm" value="active">Active</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="sm" value="archived">Archived</ToggleGroupItem>
      </ToggleGroup>
      <ul className="flex flex-col gap-2" role="list">
        {shown.map(project => (
          <li className={itemClass()} key={project.title}>
            <ItemContent>
              <p className="item-title">{project.title}</p>
              <ItemDescription>{project.description}</ItemDescription>
            </ItemContent>
            <Badge>{project.status}</Badge>
          </li>
        ))}
      </ul>
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Badge, itemClass, ItemContent, ItemDescription, ToggleGroup, ToggleGroupItem } from '@pelatform/react/prefixed';

const projects = [
  { title: 'Website redesign', description: 'Due March 14', status: 'Active' },
  { title: 'Mobile app', description: 'Due April 2', status: 'Active' },
  { title: 'Brand guidelines', description: 'Finished January 20', status: 'Archived' },
];

export function Example() {
  const [status, setStatus] = useState('all');
  // With no item pressed, every project shows, as with All.
  const shown = projects.filter(project => !status || status === 'all' || project.status.toLowerCase() === status);

  return (
    <div className="plf:flex plf:flex-col plf:gap-4">
      <ToggleGroup join aria-label="Show projects" value={status} onValueChange={setStatus}>
        <ToggleGroupItem variant="outline" size="sm" value="all">All</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="sm" value="active">Active</ToggleGroupItem>
        <ToggleGroupItem variant="outline" size="sm" value="archived">Archived</ToggleGroupItem>
      </ToggleGroup>
      <ul className="plf:flex plf:flex-col plf:gap-2" role="list">
        {shown.map(project => (
          <li className={itemClass()} key={project.title}>
            <ItemContent>
              <p className="plf:item-title">{project.title}</p>
              <ItemDescription>{project.description}</ItemDescription>
            </ItemContent>
            <Badge>{project.status}</Badge>
          </li>
        ))}
      </ul>
    </div>
  );
}

Toggle Group needs JavaScript to change the selection. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/badge.min.css">
<link rel="stylesheet" href="components/button-group.min.css">
<link rel="stylesheet" href="components/item.min.css">
<link rel="stylesheet" href="components/toggle.min.css">
<link rel="stylesheet" href="components/toggle-group.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/toggle-group.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/badge.prefixed.min.css">
<link rel="stylesheet" href="components/button-group.prefixed.min.css">
<link rel="stylesheet" href="components/item.prefixed.min.css">
<link rel="stylesheet" href="components/toggle.prefixed.min.css">
<link rel="stylesheet" href="components/toggle-group.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/toggle-group.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-toggle-group`	On the named `role="group"` element: empty for one item at a time, or `multiple`
`value`	Each item’s unique value
`aria-pressed`	An item’s state: `"true"` starts pressed, one item at most without `multiple`; the script adds `"false"` to the others
`disabled`	An item that cannot be pressed or released

Methods

Method	Behavior
`PLF.ToggleGroup.getOrCreateInstance(group)`	Returns the instance, creating it for valid markup
`PLF.ToggleGroup.getInstance(group)`	Returns the instance or `null`
`instance.getValue()`	Returns the pressed values as an array, in item order
`instance.setValue(values)`	Sets the selection from an array of values; returns `false` for unknown values, more than one in a single group, no change, a disabled item or cancellation
`instance.toggle(value)`	Presses or releases one item; in a single group, the other item is released. Returns like `setValue`
`instance.destroy()`	Removes the listener; items keep their state

Events

Event	When
`plf:toggle-group:before-change`	Before the selection changes; cancelable
`plf:toggle-group:change`	After the items’ `aria-pressed` is updated

Each event’s detail:

Property	Value
`instance`	The Toggle Group instance
`reason`	`api` or `trigger`
`trigger`	The clicked item, or `null` from a method
`previousValue`	The pressed values before, as an array
`value`	The new pressed values, as an array

Both fire on the group.

The group only changes its selection: apply it in your plf:toggle-group:change handler. It submits no form value.

Keyboard

Key	Action
Tab, Shift+Tab	Move between items
Enter, Space	Presses or releases the focused item

React

ToggleGroup from @pelatform/react renders this group and gives its items their state: it keeps its own, or the application sets it with value.

Prop	Values	Default
`type`	`single`, one item pressed at a time, or `multiple`	`single`
`value`	The pressed item’s `value`, or `''` with none; with `multiple`, an array of values in item order. The application changes it in `onValueChange`	Its own state
`defaultValue`	The value pressed at first, written as `value`, when the application does not set `value`	None pressed
`onValueChange`	`(value)`, called when a click presses or releases an item; keep `value` to stay as it is	None
`join`	`true` joins the items into one control (`join`)	`false`
`orientation`	`horizontal`, `vertical` (`join-vertical`), for a joined group	`horizontal`

Part	Element
`ToggleGroupItem`	A Toggle, `type="button"`, whose state is the group’s: Button’s classes from `variant`, `size` and `shape`, a unique `value`, and `join-item` in a joined group

The other props are the element’s own, className and ref included.

CSS variables

Items take Toggle’s and Button’s variables; a connected group takes Button Group’s.