Toggle Group

A group of toggle buttons.

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

@Component({
	selector: 'spartan-toggle-group-preview',
	imports: [HlmToggleGroupImports, NgIcon],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-toggle-group type="multiple" variant="outline">
			<button hlmToggleGroupItem value="bold" aria-label="Toggle bold">
				<ng-icon name="lucideBold" />
			</button>
			<button hlmToggleGroupItem value="italic" aria-label="Toggle italic">
				<ng-icon name="lucideItalic" />
			</button>
			<button hlmToggleGroupItem value="underline" aria-label="Toggle underline">
				<ng-icon name="lucideUnderline" />
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupPreview {}

Installation

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

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

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, runInInjectionContext } from '@angular/core';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
import { twMerge } from 'tailwind-merge';

export function hlm(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs));
}

// Global map to track class managers per element
const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
// Global mutation observer for all elements
let globalObserver: MutationObserver | null = null;
const observedElements = new Set<HTMLElement>();

interface ElementClassManager {
	element: HTMLElement;
	sources: Map<number, { classes: Set<string>; order: number }>;
	baseClasses: Set<string>;
	isUpdating: boolean;
	nextOrder: number;
	hasInitialized: boolean;
	restoreRafId: number | null;
	/** Transitions are suppressed until the first effect writes correct classes */
	transitionsSuppressed: boolean;
	/** Original inline transition value to restore after suppression (empty string = none was set) */
	previousTransition: string;
	/** Original inline transition priority to preserve !important when restoring */
	previousTransitionPriority: string;
}

let sourceCounter = 0;

/**
 * This function dynamically adds and removes classes for a given element without requiring
 * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
 *
 * 1. This will merge the existing classes on the element with the new classes.
 * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
 * 3. Multiple calls to this function on the same element will be merged efficiently.
 */
export function classes(computed: () => ClassValue[] | string, options: ClassesOptions = {}) {
	runInInjectionContext(options.injector ?? inject(Injector), () => {
		const elementRef = options.elementRef ?? inject(ElementRef);
		const platformId = inject(PLATFORM_ID);
		const destroyRef = inject(DestroyRef);
		const baseClasses = inject(new HostAttributeToken('class'), { optional: true });

		const element = elementRef.nativeElement;

		// Create unique identifier for this source
		const sourceId = sourceCounter++;

		// Get or create the class manager for this element
		let manager = elementClassManagers.get(element);

		if (!manager) {
			// Initialize base classes from variation (host attribute 'class')
			const initialBaseClasses = new Set<string>();

			if (baseClasses) {
				toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
			}

			manager = {
				element,
				sources: new Map(),
				baseClasses: initialBaseClasses,
				isUpdating: false,
				nextOrder: 0,
				hasInitialized: false,
				restoreRafId: null,
				transitionsSuppressed: false,
				previousTransition: '',
				previousTransitionPriority: '',
			};
			elementClassManagers.set(element, manager);

			// Setup global observer if needed and register this element
			setupGlobalObserver(platformId);
			observedElements.add(element);

			// Suppress transitions until the first effect writes correct classes and
			// the browser has painted them. This prevents CSS transition animations
			// during hydration when classes change from SSR state to client state.
			if (isPlatformBrowser(platformId)) {
				manager.previousTransition = element.style.getPropertyValue('transition');
				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
				element.style.setProperty('transition', 'none', 'important');
				manager.transitionsSuppressed = true;
			}
		}

		// Assign order once at registration time
		const sourceOrder = manager.nextOrder++;

		function updateClasses(): void {
			// Get the new classes from the computed function
			const newClasses = toClassList(computed());

			// Update this source's classes, keeping the original order
			manager!.sources.set(sourceId, {
				classes: new Set(newClasses),
				order: sourceOrder,
			});

			// Update the element
			updateElement(manager!);

			// Re-enable transitions after the first effect writes correct classes.
			// Deferred to next animation frame so the browser paints the class change
			// with transitions disabled first, then re-enables them.
			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				manager!.restoreRafId = requestAnimationFrame(() => {
					manager!.restoreRafId = null;
					restoreTransitionSuppression(manager!);
				});
			}
		}

		// Register cleanup with DestroyRef
		destroyRef.onDestroy(() => {
			if (manager!.restoreRafId !== null) {
				cancelAnimationFrame(manager!.restoreRafId);
				manager!.restoreRafId = null;
			}

			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				restoreTransitionSuppression(manager!);
			}

			// Remove this source from the manager
			manager!.sources.delete(sourceId);

			// If no more sources, clean up the manager
			if (manager!.sources.size === 0) {
				cleanupManager(element);
			} else {
				// Update element without this source's classes
				updateElement(manager!);
			}
		});

		/**
		 * We need this effect to track changes to the computed classes. Ideally, we would use
		 * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
		 * effect which works in both browser and SSR.
		 */
		effect(updateClasses);
	});
}

function restoreTransitionSuppression(manager: ElementClassManager): void {
	const prev = manager.previousTransition;
	if (prev) {
		manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
	} else {
		manager.element.style.removeProperty('transition');
	}
}

// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
function setupGlobalObserver(platformId: Object): void {
	if (isPlatformBrowser(platformId) && !globalObserver) {
		// Create single global observer that watches the entire document
		globalObserver = new MutationObserver((mutations) => {
			for (const mutation of mutations) {
				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
					const element = mutation.target as HTMLElement;
					const manager = elementClassManagers.get(element);

					// Only process elements we're managing
					if (manager && observedElements.has(element)) {
						if (manager.isUpdating) continue; // Ignore changes we're making

						// Update base classes to include any externally added classes
						const currentClasses = toClassList(element.className);
						const allSourceClasses = new Set<string>();

						// Collect all classes from all sources
						for (const source of manager.sources.values()) {
							for (const className of source.classes) {
								allSourceClasses.add(className);
							}
						}

						// Any classes not from sources become new base classes
						manager.baseClasses.clear();

						for (const className of currentClasses) {
							if (!allSourceClasses.has(className)) {
								manager.baseClasses.add(className);
							}
						}

						updateElement(manager);
					}
				}
			}
		});

		// Start observing the entire document for class attribute changes
		globalObserver.observe(document, {
			attributes: true,
			attributeFilter: ['class'],
			subtree: true, // Watch all descendants
		});
	}
}

function updateElement(manager: ElementClassManager): void {
	if (manager.isUpdating) return; // Prevent recursive updates

	manager.isUpdating = true;

	// Handle initialization: capture base classes after first source registration
	if (!manager.hasInitialized && manager.sources.size > 0) {
		// Get current classes on element (may include SSR classes)
		const currentClasses = toClassList(manager.element.className);

		// Get all classes that will be applied by sources
		const allSourceClasses = new Set<string>();
		for (const source of manager.sources.values()) {
			source.classes.forEach((className) => allSourceClasses.add(className));
		}

		// Only consider classes as "base" if they're not produced by any source
		// This prevents SSR-rendered classes from being preserved as base classes
		currentClasses.forEach((className) => {
			if (!allSourceClasses.has(className)) {
				manager.baseClasses.add(className);
			}
		});

		manager.hasInitialized = true;
	}

	// Get classes from all sources, sorted by registration order (later takes precedence)
	const sortedSources = Array.from(manager.sources.entries()).sort(([, a], [, b]) => a.order - b.order);

	const allSourceClasses: string[] = [];
	for (const [, source] of sortedSources) {
		allSourceClasses.push(...source.classes);
	}

	// Combine base classes with all source classes, ensuring base classes take precedence
	const classesToApply =
		allSourceClasses.length > 0 || manager.baseClasses.size > 0
			? hlm([...allSourceClasses, ...manager.baseClasses])
			: '';

	// Apply the classes to the element
	if (manager.element.className !== classesToApply) {
		manager.element.className = classesToApply;
	}

	manager.isUpdating = false;
}

function cleanupManager(element: HTMLElement): void {
	// Remove from global tracking
	observedElements.delete(element);
	elementClassManagers.delete(element);

	// If no more elements being tracked, cleanup global observer
	if (observedElements.size === 0 && globalObserver) {
		globalObserver.disconnect();
		globalObserver = null;
	}
}

interface ClassesOptions {
	elementRef?: ElementRef<HTMLElement>;
	injector?: Injector;
}

// Cache for parsed class lists to avoid repeated string operations
const classListCache = new Map<string, string[]>();

function toClassList(className: string | ClassValue[]): string[] {
	// For simple string inputs, use cache to avoid repeated parsing
	if (typeof className === 'string' && classListCache.has(className)) {
		return classListCache.get(className)!;
	}

	const result = clsx(className)
		.split(' ')
		.filter((c) => c.length > 0);

	// Cache string results, but limit cache size to prevent memory growth
	if (typeof className === 'string' && classListCache.size < 1000) {
		classListCache.set(className, result);
	}

	return result;
}

import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { Directive, InjectionToken, computed, inject, input, numberAttribute, type ExistingProvider, type Type } from '@angular/core';
import { NumberInput } from '@angular/cdk/coercion';
import { ToggleVariants, toggleVariants } from '@spartan-ng/helm/toggle';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: 'button[hlmToggleGroupItem]',
	hostDirectives: [
		{
			directive: BrnToggleGroupItem,
			inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
			outputs: ['stateChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group-item',
		'[attr.data-variant]': '_variant()',
		'[attr.data-size]': '_size()',
		'[attr.data-spacing]': '_toggleGroup.spacing()',
	},
})
export class HlmToggleGroupItem {
	protected readonly _toggleGroup = injectHlmToggleGroup();

	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');

	protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
	protected readonly _size = computed(() => this._toggleGroup.size() || this.size());

	constructor() {
		classes(() => [
			'data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
			toggleVariants({
				variant: this._variant(),
				size: this._size(),
			}),
		]);
	}
}

export const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');

export function injectHlmToggleGroup(): HlmToggleGroup {
	return inject(HlmToggleGroupToken);
}

export function provideHlmToggleGroup(toggleGroup: Type<HlmToggleGroup>): ExistingProvider {
	return { provide: HlmToggleGroupToken, useExisting: toggleGroup };
}

@Directive({
	selector: '[hlmToggleGroup],hlm-toggle-group',
	providers: [provideHlmToggleGroup(HlmToggleGroup)],
	hostDirectives: [
		{
			directive: BrnToggleGroup,
			inputs: ['type', 'value', 'nullable', 'disabled'],
			outputs: ['valueChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
		'[attr.data-spacing]': 'spacing()',
		'[attr.data-orientation]': 'orientation()',
		'[style.--gap]': 'spacing()',
	},
})
export class HlmToggleGroup {
	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');
	public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');

	constructor() {
		classes(
			() =>
				'rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
		);
	}
}

export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;

import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { Directive, InjectionToken, computed, inject, input, numberAttribute, type ExistingProvider, type Type } from '@angular/core';
import { NumberInput } from '@angular/cdk/coercion';
import { ToggleVariants, toggleVariants } from '@spartan-ng/helm/toggle';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: 'button[hlmToggleGroupItem]',
	hostDirectives: [
		{
			directive: BrnToggleGroupItem,
			inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
			outputs: ['stateChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group-item',
		'[attr.data-variant]': '_variant()',
		'[attr.data-size]': '_size()',
		'[attr.data-spacing]': '_toggleGroup.spacing()',
	},
})
export class HlmToggleGroupItem {
	protected readonly _toggleGroup = injectHlmToggleGroup();

	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');

	protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
	protected readonly _size = computed(() => this._toggleGroup.size() || this.size());

	constructor() {
		classes(() => [
			'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
			toggleVariants({
				variant: this._variant(),
				size: this._size(),
			}),
		]);
	}
}

export const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');

export function injectHlmToggleGroup(): HlmToggleGroup {
	return inject(HlmToggleGroupToken);
}

export function provideHlmToggleGroup(toggleGroup: Type<HlmToggleGroup>): ExistingProvider {
	return { provide: HlmToggleGroupToken, useExisting: toggleGroup };
}

@Directive({
	selector: '[hlmToggleGroup],hlm-toggle-group',
	providers: [provideHlmToggleGroup(HlmToggleGroup)],
	hostDirectives: [
		{
			directive: BrnToggleGroup,
			inputs: ['type', 'value', 'nullable', 'disabled'],
			outputs: ['valueChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
		'[attr.data-spacing]': 'spacing()',
		'[attr.data-orientation]': 'orientation()',
		'[style.--gap]': 'spacing()',
	},
})
export class HlmToggleGroup {
	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');
	public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');

	constructor() {
		classes(
			() =>
				'rounded-none data-[size=sm]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
		);
	}
}

export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;

import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { Directive, InjectionToken, computed, inject, input, numberAttribute, type ExistingProvider, type Type } from '@angular/core';
import { NumberInput } from '@angular/cdk/coercion';
import { ToggleVariants, toggleVariants } from '@spartan-ng/helm/toggle';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: 'button[hlmToggleGroupItem]',
	hostDirectives: [
		{
			directive: BrnToggleGroupItem,
			inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
			outputs: ['stateChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group-item',
		'[attr.data-variant]': '_variant()',
		'[attr.data-size]': '_size()',
		'[attr.data-spacing]': '_toggleGroup.spacing()',
	},
})
export class HlmToggleGroupItem {
	protected readonly _toggleGroup = injectHlmToggleGroup();

	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');

	protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
	protected readonly _size = computed(() => this._toggleGroup.size() || this.size());

	constructor() {
		classes(() => [
			'data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
			toggleVariants({
				variant: this._variant(),
				size: this._size(),
			}),
		]);
	}
}

export const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');

export function injectHlmToggleGroup(): HlmToggleGroup {
	return inject(HlmToggleGroupToken);
}

export function provideHlmToggleGroup(toggleGroup: Type<HlmToggleGroup>): ExistingProvider {
	return { provide: HlmToggleGroupToken, useExisting: toggleGroup };
}

@Directive({
	selector: '[hlmToggleGroup],hlm-toggle-group',
	providers: [provideHlmToggleGroup(HlmToggleGroup)],
	hostDirectives: [
		{
			directive: BrnToggleGroup,
			inputs: ['type', 'value', 'nullable', 'disabled'],
			outputs: ['valueChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
		'[attr.data-spacing]': 'spacing()',
		'[attr.data-orientation]': 'orientation()',
		'[style.--gap]': 'spacing()',
	},
})
export class HlmToggleGroup {
	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');
	public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');

	constructor() {
		classes(
			() =>
				'data-[spacing=0]:data-[variant=outline]:rounded-4xl group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
		);
	}
}

export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;

import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { Directive, InjectionToken, computed, inject, input, numberAttribute, type ExistingProvider, type Type } from '@angular/core';
import { NumberInput } from '@angular/cdk/coercion';
import { ToggleVariants, toggleVariants } from '@spartan-ng/helm/toggle';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: 'button[hlmToggleGroupItem]',
	hostDirectives: [
		{
			directive: BrnToggleGroupItem,
			inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
			outputs: ['stateChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group-item',
		'[attr.data-variant]': '_variant()',
		'[attr.data-size]': '_size()',
		'[attr.data-spacing]': '_toggleGroup.spacing()',
	},
})
export class HlmToggleGroupItem {
	protected readonly _toggleGroup = injectHlmToggleGroup();

	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');

	protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
	protected readonly _size = computed(() => this._toggleGroup.size() || this.size());

	constructor() {
		classes(() => [
			'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
			toggleVariants({
				variant: this._variant(),
				size: this._size(),
			}),
		]);
	}
}

export const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');

export function injectHlmToggleGroup(): HlmToggleGroup {
	return inject(HlmToggleGroupToken);
}

export function provideHlmToggleGroup(toggleGroup: Type<HlmToggleGroup>): ExistingProvider {
	return { provide: HlmToggleGroupToken, useExisting: toggleGroup };
}

@Directive({
	selector: '[hlmToggleGroup],hlm-toggle-group',
	providers: [provideHlmToggleGroup(HlmToggleGroup)],
	hostDirectives: [
		{
			directive: BrnToggleGroup,
			inputs: ['type', 'value', 'nullable', 'disabled'],
			outputs: ['valueChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
		'[attr.data-spacing]': 'spacing()',
		'[attr.data-orientation]': 'orientation()',
		'[style.--gap]': 'spacing()',
	},
})
export class HlmToggleGroup {
	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');
	public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');

	constructor() {
		classes(
			() =>
				'rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
		);
	}
}

export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;

import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { Directive, InjectionToken, computed, inject, input, numberAttribute, type ExistingProvider, type Type } from '@angular/core';
import { NumberInput } from '@angular/cdk/coercion';
import { ToggleVariants, toggleVariants } from '@spartan-ng/helm/toggle';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: 'button[hlmToggleGroupItem]',
	hostDirectives: [
		{
			directive: BrnToggleGroupItem,
			inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
			outputs: ['stateChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group-item',
		'[attr.data-variant]': '_variant()',
		'[attr.data-size]': '_size()',
		'[attr.data-spacing]': '_toggleGroup.spacing()',
	},
})
export class HlmToggleGroupItem {
	protected readonly _toggleGroup = injectHlmToggleGroup();

	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');

	protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
	protected readonly _size = computed(() => this._toggleGroup.size() || this.size());

	constructor() {
		classes(() => [
			'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
			toggleVariants({
				variant: this._variant(),
				size: this._size(),
			}),
		]);
	}
}

export const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');

export function injectHlmToggleGroup(): HlmToggleGroup {
	return inject(HlmToggleGroupToken);
}

export function provideHlmToggleGroup(toggleGroup: Type<HlmToggleGroup>): ExistingProvider {
	return { provide: HlmToggleGroupToken, useExisting: toggleGroup };
}

@Directive({
	selector: '[hlmToggleGroup],hlm-toggle-group',
	providers: [provideHlmToggleGroup(HlmToggleGroup)],
	hostDirectives: [
		{
			directive: BrnToggleGroup,
			inputs: ['type', 'value', 'nullable', 'disabled'],
			outputs: ['valueChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
		'[attr.data-spacing]': 'spacing()',
		'[attr.data-orientation]': 'orientation()',
		'[style.--gap]': 'spacing()',
	},
})
export class HlmToggleGroup {
	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');
	public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');

	constructor() {
		classes(
			() =>
				'rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
		);
	}
}

export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;

import { BrnToggleGroup, BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
import { Directive, InjectionToken, computed, inject, input, numberAttribute, type ExistingProvider, type Type } from '@angular/core';
import { NumberInput } from '@angular/cdk/coercion';
import { ToggleVariants, toggleVariants } from '@spartan-ng/helm/toggle';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: 'button[hlmToggleGroupItem]',
	hostDirectives: [
		{
			directive: BrnToggleGroupItem,
			inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
			outputs: ['stateChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group-item',
		'[attr.data-variant]': '_variant()',
		'[attr.data-size]': '_size()',
		'[attr.data-spacing]': '_toggleGroup.spacing()',
	},
})
export class HlmToggleGroupItem {
	protected readonly _toggleGroup = injectHlmToggleGroup();

	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');

	protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
	protected readonly _size = computed(() => this._toggleGroup.size() || this.size());

	constructor() {
		classes(() => [
			'data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
			toggleVariants({
				variant: this._variant(),
				size: this._size(),
			}),
		]);
	}
}

export const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');

export function injectHlmToggleGroup(): HlmToggleGroup {
	return inject(HlmToggleGroupToken);
}

export function provideHlmToggleGroup(toggleGroup: Type<HlmToggleGroup>): ExistingProvider {
	return { provide: HlmToggleGroupToken, useExisting: toggleGroup };
}

@Directive({
	selector: '[hlmToggleGroup],hlm-toggle-group',
	providers: [provideHlmToggleGroup(HlmToggleGroup)],
	hostDirectives: [
		{
			directive: BrnToggleGroup,
			inputs: ['type', 'value', 'nullable', 'disabled'],
			outputs: ['valueChange'],
		},
	],
	host: {
		'data-slot': 'toggle-group',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
		'[attr.data-spacing]': 'spacing()',
		'[attr.data-orientation]': 'orientation()',
		'[style.--gap]': 'spacing()',
	},
})
export class HlmToggleGroup {
	public readonly variant = input<ToggleVariants['variant']>('default');
	public readonly size = input<ToggleVariants['size']>('default');
	public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');

	constructor() {
		classes(
			() =>
				'data-[spacing=0]:data-[variant=outline]:rounded-3xl group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
		);
	}
}

export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;

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

Use variant="outline" for an outline style.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-outline',
	imports: [HlmToggleGroupImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-toggle-group variant="outline" value="all">
			<button hlmToggleGroupItem value="all" aria-label="Toggle all">All</button>
			<button hlmToggleGroupItem value="missed" aria-label="Toggle missed">Missed</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupOutlinePreview {}

Size

Use the size prop to change the size of the toggle group.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-size',
	imports: [HlmToggleGroupImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex flex-col gap-4">
			<hlm-toggle-group type="single" size="sm" variant="outline" value="top">
				<button hlmToggleGroupItem value="top" aria-label="Toggle top">Top</button>
				<button hlmToggleGroupItem value="bottom" aria-label="Toggle bottom">Bottom</button>
				<button hlmToggleGroupItem value="left" aria-label="Toggle left">Left</button>
				<button hlmToggleGroupItem value="right" aria-label="Toggle right">Right</button>
			</hlm-toggle-group>
			<hlm-toggle-group type="single" variant="outline" value="top">
				<button hlmToggleGroupItem value="top" aria-label="Toggle top">Top</button>
				<button hlmToggleGroupItem value="bottom" aria-label="Toggle bottom">Bottom</button>
				<button hlmToggleGroupItem value="left" aria-label="Toggle left">Left</button>
				<button hlmToggleGroupItem value="right" aria-label="Toggle right">Right</button>
			</hlm-toggle-group>
		</div>
	`,
})
export class ToggleGroupSizePreview {}

Spacing

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

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-spacing',
	imports: [HlmToggleGroupImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-toggle-group type="single" size="sm" variant="outline" spacing="2" value="top">
			<button hlmToggleGroupItem value="top" aria-label="Toggle top">Top</button>
			<button hlmToggleGroupItem value="bottom" aria-label="Toggle bottom">Bottom</button>
			<button hlmToggleGroupItem value="left" aria-label="Toggle left">Left</button>
			<button hlmToggleGroupItem value="right" aria-label="Toggle right">Right</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupSpacingPreview {}

Vertical

Use orientation="vertical" for vertical toggle groups.

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

@Component({
	selector: 'spartan-toggle-group-vertical',
	imports: [HlmToggleGroupImports, NgIcon],
	providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-toggle-group type="multiple" orientation="vertical" spacing="1" [value]="['bold', 'italic']">
			<button hlmToggleGroupItem value="bold" aria-label="Toggle bold">
				<ng-icon name="lucideBold" />
			</button>

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

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

Disabled

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

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

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

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

Custom

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';
import { hlmCode } from '@spartan-ng/helm/typography';

@Component({
	selector: 'spartan-toggle-group-custom',
	imports: [HlmToggleGroupImports, HlmFieldImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-field>
			<label hlmFieldLabel>Font Weight</label>
			<hlm-toggle-group variant="outline" value="all" spacing="2" size="lg" [(value)]="fontWeight">
				@for (weight of fontWeights; track $index) {
					<button
						hlmToggleGroupItem
						[value]="weight.value"
						[attr.aria-label]="weight.label"
						class="flex size-16 flex-col items-center justify-center rounded-xl"
					>
						<span class="text-2xl leading-none" [class]="weight.class">Aa</span>
						<span class="text-muted-foreground text-xs">{{ weight.label }}</span>
					</button>
				}
			</hlm-toggle-group>
			<hlm-field-description>
				Use
				<code class="${hlmCode}">font-{{ fontWeight() }}</code>
				to set the font weight.
			</hlm-field-description>
		</hlm-field>
	`,
})
export class ToggleGroupCustomPreview {
	public fontWeights = [
		{ label: 'Light', value: 'light', class: 'font-light' },
		{ label: 'Normal', value: 'normal', class: 'font-normal' },
		{ label: 'Medium', value: 'medium', class: 'font-medium' },
		{ label: 'Bold', value: 'bold', class: 'font-bold' },
	];

	public fontWeight = signal('normal');
}

Form

import { ChangeDetectionStrategy, 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 })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	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);
	}
}

RTL

To enable RTL support in spartan-ng, see the RTL configuration guide.

import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmToggleGroupImports } from '@spartan-ng/helm/toggle-group';

@Component({
	selector: 'spartan-toggle-group-rtl',
	imports: [HlmToggleGroupImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-toggle-group variant="outline" value="list" [dir]="_dir()">
			<button hlmToggleGroupItem value="list" [aria-label]="_t()['list']">
				{{ _t()['list'] }}
			</button>

			<button hlmToggleGroupItem value="grid" [aria-label]="_t()['grid']">
				{{ _t()['grid'] }}
			</button>

			<button hlmToggleGroupItem value="cards" [aria-label]="_t()['cards']">
				{{ _t()['cards'] }}
			</button>
		</hlm-toggle-group>
	`,
})
export class ToggleGroupRtlPreview {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				list: 'List',
				grid: 'Grid',
				cards: 'Cards',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				list: 'قائمة',
				grid: 'شبكة',
				cards: 'بطاقات',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				list: 'רשימה',
				grid: 'רשת',
				cards: 'כרטיסים',
			},
		},
	};

	private readonly _translation = computed(() => this._translations[this._language()]);
	protected readonly _t = computed(() => this._translation().values);
	protected readonly _dir = computed(() => this._translation().dir);
}

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	true	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.

BrnToggleGroupItem

Selector: button[brnToggleGroupItem]

Inputs

Prop	Type	Default	Description
id	string	`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
stateChange	'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	-

HlmToggleGroup

Selector: [hlmToggleGroup],hlm-toggle-group

Inputs

Prop	Type	Default	Description
variant	ToggleVariants['variant']	default	-
size	ToggleVariants['size']	default	-
spacing	number	0	-
orientation	'horizontal' \| 'vertical'	horizontal	-

Tooltip

Toggle

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Toggle Group

Installation

1 Copy utils if needed

2 Copy and paste the following code into your project.

Usage

Examples

Outline

Size

Spacing

Vertical

Disabled

Custom

Form

RTL

Brain API

BrnToggleGroup

Inputs

Outputs

BrnToggleGroupItem

Inputs

Outputs

Helm API

HlmToggleGroupItem

Inputs

HlmToggleGroup

Inputs