All components
Primitives

ToggleGroup

Single or multiple pressed items with roving focus and explicit deselection.

Playground

Change the inputs, watch the outputs and copy the usage code.

ToggleGroup

A real qzToggleGroup. allowDeselection applies to single mode; the committed output is the new value.

Inputs

Events

No events yet. Interact with the preview to see them here.

Template

<div
  qzToggleGroup
  aria-label="Formatting"
  type="single"
  [(value)]="formats"
>&lt;button qzToggleItem="bold"&gt;Bold&lt;/button&gt; …</div>

ToggleGroup — expanded preview

Example

ToggleGroup
Loading demo…

Install

npm install @quartz-headless/core @quartz-headless/primitives

// exports
import { ToggleGroupDirective } from '@quartz-headless/primitives';

Prefer owning the source? Copy it with the CLI.