Toggle Group

A group of toggle buttons.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBookmark, lucideHeart, lucideStar } from '@ng-icons/lucide';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-preview',
	imports: [HlmToggleGroupImports, NgIcon],
	providers: [provideIcons({ lucideStar, lucideHeart, lucideBookmark })],
	template: `
		<hlm-toggle-group type="multiple" variant="outline" spacing="2" size="sm">
			<button
				hlmToggleGroupItem
				value="star"
				aria-label="Toggle star"
				class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-yellow-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-yellow-500"
			>
				<ng-icon name="lucideStar" />
				Star
			</button>
			<button
				hlmToggleGroupItem
				value="heart"
				aria-label="Toggle heart"
				class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-red-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-red-500"
			>
				<ng-icon name="lucideHeart" />
				Heart
			</button>
			<button
				hlmToggleGroupItem
				value="bookmark"
				aria-label="Toggle bookmark"
				class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-blue-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-blue-500"
			>
				<ng-icon name="lucideBookmark" />
				Bookmark
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupPreview {}

Installation

ng g @spartan-ng/cli:ui toggle-group

Usage

import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

<hlm-toggle-group type="single">
	<button hlmToggleGroupItem value="a">A</button>
	<button hlmToggleGroupItem value="b">B</button>
	<button hlmToggleGroupItem value="c">C</button>
</hlm-toggle-group>

Examples

Outline

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-outline',
	imports: [HlmToggleGroupImports, HlmIconImports],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<hlm-toggle-group type="multiple" variant="outline">
			<button hlmToggleGroupItem value="bold" aria-label="Toggle bold">
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button hlmToggleGroupItem value="italic" aria-label="Toggle italic">
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button hlmToggleGroupItem value="underline" aria-label="Toggle underline">
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupOutlinePreview {}

Single

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleGroup, HlmToggleGroupItem } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-single',
	imports: [HlmToggleGroupItem, HlmToggleGroup, HlmIconImports],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<hlm-toggle-group type="single">
			<button hlmToggleGroupItem value="bold" aria-label="Toggle bold">
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button hlmToggleGroupItem value="italic" aria-label="Toggle italic">
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button hlmToggleGroupItem value="underline" aria-label="Toggle underline">
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupSinglePreview {}

Small

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-small',
	imports: [HlmToggleGroupImports, HlmIconImports],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<hlm-toggle-group type="single" size="sm">
			<button hlmToggleGroupItem value="bold" aria-label="Toggle bold">
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button hlmToggleGroupItem value="italic" aria-label="Toggle italic">
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button hlmToggleGroupItem value="underline" aria-label="Toggle underline">
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupSmallPreview {}

Large

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-large',
	imports: [HlmToggleGroupImports, HlmIconImports],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<hlm-toggle-group type="multiple" size="lg">
			<button hlmToggleGroupItem value="bold" aria-label="Toggle bold">
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button hlmToggleGroupItem value="italic" aria-label="Toggle italic">
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button hlmToggleGroupItem value="underline" aria-label="Toggle underline">
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupLargePreview {}

Disabled

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-disabled',
	imports: [HlmToggleGroupImports, HlmIconImports],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	template: `
		<hlm-toggle-group type="multiple" disabled>
			<button hlmToggleGroupItem value="bold" aria-label="Toggle bold">
				<ng-icon hlm size="sm" name="lucideBold" />
			</button>

			<button hlmToggleGroupItem value="italic" aria-label="Toggle italic">
				<ng-icon hlm size="sm" name="lucideItalic" />
			</button>

			<button hlmToggleGroupItem value="underline" aria-label="Toggle underline">
				<ng-icon hlm size="sm" name="lucideUnderline" />
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupDisabledPreview {}

Spacing

Use spacing="2" to add spacing between toggle group items.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBookmark, lucideHeart, lucideStar } from '@ng-icons/lucide';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-spacing',
	imports: [HlmToggleGroupImports, NgIcon],
	providers: [provideIcons({ lucideStar, lucideHeart, lucideBookmark })],
	template: `
		<hlm-toggle-group type="multiple" variant="outline" spacing="2" size="sm">
			<button
				hlmToggleGroupItem
				value="star"
				aria-label="Toggle star"
				class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-yellow-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-yellow-500"
			>
				<ng-icon name="lucideStar" />
				Star
			</button>
			<button
				hlmToggleGroupItem
				value="heart"
				aria-label="Toggle heart"
				class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-red-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-red-500"
			>
				<ng-icon name="lucideHeart" />
				Heart
			</button>
			<button
				hlmToggleGroupItem
				value="bookmark"
				aria-label="Toggle bookmark"
				class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-blue-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-blue-500"
			>
				<ng-icon name="lucideBookmark" />
				Bookmark
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupSpacingPreview {}

Form

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBookmark, lucideHeart, lucideStar } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-form',
	imports: [HlmToggleGroupImports, HlmButtonImports, NgIcon, ReactiveFormsModule],
	providers: [provideIcons({ lucideStar, lucideHeart, lucideBookmark })],
	template: `
		<form class="space-y-6" [formGroup]="form" (ngSubmit)="submit()">
			<hlm-toggle-group formControlName="action" type="single" variant="outline" spacing="2" size="sm">
				<button
					hlmToggleGroupItem
					value="star"
					aria-label="Toggle star"
					class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-yellow-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-yellow-500"
				>
					<ng-icon name="lucideStar" />
					Star
				</button>
				<button
					hlmToggleGroupItem
					value="heart"
					aria-label="Toggle heart"
					class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-red-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-red-500"
				>
					<ng-icon name="lucideHeart" />
					Heart
				</button>
				<button
					hlmToggleGroupItem
					value="bookmark"
					aria-label="Toggle bookmark"
					class="data-[state=on]:bg-transparent data-[state=on]:*:[ng-icon]:*:[svg]:fill-blue-500 data-[state=on]:*:[ng-icon]:*:[svg]:stroke-blue-500"
				>
					<ng-icon name="lucideBookmark" />
					Bookmark
				</button>
			</hlm-toggle-group>

			<button hlmBtn type="submit">Submit</button>
		</form>
	`,
})
export class ToggleGroupSpacingForm {
	private readonly _formBuilder = inject(FormBuilder);
	public form = this._formBuilder.group({
		action: ['star', Validators.required],
	});

	submit() {
		console.log(this.form.value);
	}
}

Brain API

BrnToggleGroup

Selector: [brnToggleGroup],brn-toggle-group

ExportAs: brnToggleGroup

Inputs

Prop	Type	Default	Description
type	ToggleType	single	The type of the toggle group.
nullable	boolean	false	Whether no button toggles need to be selected.
disabled	boolean	false	Whether the button toggle group is disabled.
value	ToggleValue<T>	undefined	Value of the toggle group.

Outputs

Prop	Type	Default	Description
valueChange	ToggleValue<T>	-	Emits when the value changes.
change	BrnButtonToggleChange<T>	-	Emit event when the group value changes.
valueChanged	ToggleValue<T>	undefined	Value of the toggle group.

BrnToggleGroupItem

Selector: button[brnToggleGroupItem]

Inputs

Prop	Type	Default	Description
id	unknown	`brn-toggle-group-item-${++BrnToggleGroupItem._uniqueId}`	The id of the toggle.
value	T	-	The value this toggle represents.
disabled	boolean	false	Whether the toggle is disabled.
type	'button' \| 'submit' \| 'reset'	button	The type of the button.
aria-label	string \| null	null	Accessibility label for screen readers. Use when no visible label exists.
state	'on' \| 'off'	off	The current state of the toggle when not used in a group.

Outputs

Prop	Type	Default	Description
stateChanged	'on' \| 'off'	off	The current state of the toggle when not used in a group.

Helm API

HlmToggleGroupItem

Selector: button[hlmToggleGroupItem]

Inputs

Prop	Type	Default	Description
variant	ToggleVariants['variant']	default	-
size	ToggleVariants['size']	default	-
class	ClassValue	-	-

HlmToggleGroup

Selector: [hlmToggleGroup],hlm-toggle-group

Inputs

Prop	Type	Default	Description
variant	ToggleVariants['variant']	default	-
size	ToggleVariants['size']	default	-
spacing	number	0	-
class	ClassValue	-	-

Tooltip

Toggle

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.