Toggle

A button that stays pressed until tapped again, on its own or in a group where one or several are pressed.

Installation

npx @blotch/dolan add toggle

import {
  UiToggle,
  UiToggleGroup,
  UiToggleGroupItem,
} from '../components/ui/toggle';

Toggle imports class-variance-authority (see Installation).

Usage

src/app/app.ts

import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import { UiToggle } from '../components/ui/toggle';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, UiToggle],
  template: `
    <ui-toggle [(pressed)]="bold">
      <text class="text-sm font-bold text-foreground">B</text>
    </ui-toggle>
  `,
})
export class App {
  protected readonly bold = signal(false);
}

A pressed toggle gets the accent background.
Toggles don't wrap their content, so put a <text> element inside.
pressed here is the on/off state, not a tap event like Button's pressed.

Toggle group, one at a time

<ui-toggle-group type="single" [(value)]="alignment">
  <ui-toggle-group-item value="left">
    <text class="text-sm text-foreground">Left</text>
  </ui-toggle-group-item>
  <ui-toggle-group-item value="center">
    <text class="text-sm text-foreground">Center</text>
  </ui-toggle-group-item>
</ui-toggle-group>

value is an array even in single mode, such as ['left']. Bind it to signal<string[]>(['left']).
Tapping the pressed item again clears the selection to []. Use Radio Group if one option must always stay selected.

Toggle group, several at once

<ui-toggle-group type="multiple" [(value)]="formatting">…</ui-toggle-group>

Each tap adds or removes that item's value.

Variants and sizes

<ui-toggle variant="outline" size="sm">…</ui-toggle>
<ui-toggle-group variant="outline" size="lg">…</ui-toggle-group>

A group passes its variant and size to every item.

Disabled

<ui-toggle [disabled]="true">…</ui-toggle>
<ui-toggle-group type="single" [disabled]="true" [value]="['left']">
  …
</ui-toggle-group>

API

UiToggle

Input	Type	Default	Description
`pressed`	`boolean`	`false`	Whether it's pressed. Supports `[(pressed)]`.
`variant`	`'default' \| 'outline'`	`'default'`	`outline` adds a border.
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	Height and padding.
`disabled`	`boolean`	`false`	Dims the toggle and ignores taps.
`class`	`string`	`''`	Extra Tailwind classes for the toggle.

Output	Type	Description
`pressedChange`	`boolean`	Emits the new state, for `[(pressed)]`.

UiToggleGroup

Input	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Whether one or several items can be pressed.
`value`	`string[]`	`[]`	The pressed items' values. Supports `[(value)]`.
`variant`	`'default' \| 'outline'`	`'default'`	Style of every item.
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	Size of every item.
`disabled`	`boolean`	`false`	Dims every item and ignores taps.
`class`	`string`	`''`	Extra Tailwind classes for the row.

Output	Type	Description
`valueChange`	`string[]`	Emits the new value, for `[(value)]`.

UiToggleGroupItem

Input	Type	Default	Description
`value`	`string`	Required	The value this item adds or removes.
`class`	`string`	`''`	Extra Tailwind classes for the item.

No outputs.

The file also exports the ToggleVariant and ToggleSize types.

Button Group: connected buttons for one-off actions
Radio Group: one option that always stays selected
Switch: an on/off control for settings

#Toggle

#Installation

#Usage

#Toggle group, one at a time

#Toggle group, several at once

#Variants and sizes

#Disabled

#API

#UiToggle

#UiToggleGroup

#UiToggleGroupItem

#Related