Toggle
A pill-shaped pressed/unpressed button, standalone or grouped into a segmented control built on @angular/aria/toolbar.
Toggle is a pill-shaped pressed/unpressed button. Used alone it is a self-contained two-way [(pressed)]
control; nested inside a ToggleGroup it becomes an item of a segmented control — single (exclusive, like a
radio group) or multi (independent selections).
Minimal example
import { Component, signal } from "@angular/core";
import { ToggleComponent, TOGGLE_ICON_CLASS, TOGGLE_LABEL_CLASS } from "@sinequa/galactik";
@Component({
selector: "favorite-toggle",
imports: [ToggleComponent],
template: `
<Toggle variant="multi" [(pressed)]="bookmarked">
<span [class]="iconClass">★</span>
<span [class]="labelClass">Favorite</span>
</Toggle>
`,
})
export class FavoriteToggleComponent {
bookmarked = signal(false);
protected readonly iconClass = TOGGLE_ICON_CLASS;
protected readonly labelClass = TOGGLE_LABEL_CLASS;
}How it works
Toggle (standalone) and Toggle[value] (grouped item) are two distinct components sharing the Toggle/
toggle tag name, discriminated by the presence of the value attribute. Grouped items require an ancestor
<ToggleGroup> — its selection model comes entirely from @angular/aria/toolbar (roving tabindex, arrow keys,
typeahead, all free).
Recipes
A single-selection segmented control
The group's value model is always a string[], even in single-selection mode — bind an array signal.
import { Component, signal } from "@angular/core";
import { ToggleGroupComponent, ToggleItemComponent } from "@sinequa/galactik";
@Component({
selector: "status-filter",
imports: [ToggleGroupComponent, ToggleItemComponent],
template: `
<ToggleGroup [(value)]="selected">
<Toggle value="all">All</Toggle>
<Toggle value="open">Open</Toggle>
<Toggle value="closed">Closed</Toggle>
</ToggleGroup>
`,
})
export class StatusFilterComponent {
selected = signal<string[]>(["all"]);
}Options
Prop
Type
Pitfalls
Button
Restyle native <button> elements as a Galactik button — six variants, four sizes, icon-only mode — with no wrapper component and no change to native button behavior.
Form
Form controls — Checkbox, Radio, Switch, Input, Textarea, Search fields, Select and Autocomplete — and how they compose with Angular Signal Forms.