Headless toggle

Headless toggle gives you pressed-button semantics on a real <button> plus an optional tngToggleGroup contract when you want grouped selection.

Reach for tngToggle when the control itself is the action. If the goal is to present a set of named choices such as density presets or filters, use Headless Button Toggle instead.

• Standalone toggles support controlled or uncontrolled pressed state.
• Grouped toggles support single or multiple selection using native buttons.
• State hooks are exposed through aria-pressed, data-state, and group data attributes.

Installation

Import the directive pair when you need both standalone pressed buttons and grouped toggle selection.

import { TngToggle, TngToggleGroup } from '@tailng-ui/primitives';

Basic usage

Use tngToggle on a native button when the interaction is just a compact pressed state.

<button
  tngToggle
  [pressed]="showGrid()"
  ariaLabel="Grid view"
  (pressedChange)="showGrid.set($event)"
>
  Grid
</button>

Grouped usage

Add tngToggleGroup when toggles need a shared selection model. Use selectionMode="single" for view pickers or leave the default multiple mode for formatting toolbars.

<div
  tngToggleGroup
  selectionMode="single"
  ariaLabel="View mode"
  [value]="viewMode()"
  (valueChange)="onViewModeChange($event)"
>
  <button tngToggle tngToggleValue="grid">Grid</button>
  <button tngToggle tngToggleValue="list">List</button>
  <button tngToggle tngToggleValue="split">Split</button>
</div>

Accessibility baseline

• aria-pressed stays in sync with the pressed state for every toggle.
• Keyboard activation still uses native button behavior for Enter, Space, and Tab.
• tngToggleGroup adds a labeled role="group" region and exposes selection state through value outputs.