Switch

A control that allows the user to toggle between checked and not checked.

Airplane mode

import { Component } from '@angular/core';
import { HlmLabel } from '@spartan-ng/helm/label';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-switch-preview',
	imports: [HlmLabel, HlmSwitch],
	template: `
		<label class="flex items-center" hlmLabel>
			<hlm-switch class="mr-2" />
			Airplane mode
		</label>
	`,
})
export class SwitchPreview {}

Installation

ng g @spartan-ng/cli:ui switch

nx g @spartan-ng/cli:ui switch

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, makeEnvironmentProviders, runInInjectionContext, type EnvironmentProviders } from '@angular/core';
import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
import { provideSpartanHlm } from '@spartan-ng/helm/utils';
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;
}

/**
 * Provides default configuration for Spartan Helm components.
 *
 * This utility configures the Angular CDK overlay to disable the `usePopover`
 * behavior introduced in Angular 21, which causes CDK overlay-based components
 * (sheets, dialogs, tooltips, etc.) to render above `position: fixed` elements
 * like `<hlm-toaster>`.
 *
 * @returns {EnvironmentProviders} Environment providers to be added to the application config.
 *
 * @example
 * ```ts
 * // app.config.ts
 * 
 *
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideSpartanHlm(),
 *     // ... other providers
 *   ],
 * };
 * ```
 */
export function provideSpartanHlm(): EnvironmentProviders {
	return makeEnvironmentProviders([
		{
			provide: OVERLAY_DEFAULT_CONFIG,
			useValue: { usePopover: false },
		},
	]);
}

import { BrnSwitch, BrnSwitchThumb, type BrnSwitchSize } from '@spartan-ng/brain/switch';
import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, input, linkedSignal, output } from '@angular/core';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
import { type ClassValue } from 'clsx';

@Directive({
	selector: '[hlmSwitchThumb],hlm-switch-thumb',
	hostDirectives: [BrnSwitchThumb],
	host: { 'data-slot': 'switch-thumb' },
})
export class HlmSwitchThumb {
	constructor() {
		classes(() => 'bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)] pointer-events-none block ring-0 transition-transform');
	}
}

export const HLM_SWITCH_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmSwitch),
	multi: true,
};

@Component({
	selector: 'hlm-switch',
	imports: [BrnSwitch, HlmSwitchThumb],
	providers: [HLM_SWITCH_VALUE_ACCESSOR],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'switch',
		class: 'contents',
		'[attr.aria-label]': 'null',
		'[attr.aria-labelledby]': 'null',
		'[attr.aria-describedby]': 'null',
	},
	template: `
		<brn-switch
			[class]="_computedClass()"
			[size]="size()"
			[checked]="checked()"
			[disabled]="_disabled()"
			[id]="inputId()"
			[forceInvalid]="forceInvalid()"
			[aria-label]="ariaLabel()"
			[aria-labelledby]="ariaLabelledby()"
			[aria-describedby]="ariaDescribedby()"
			(checkedChange)="handleChange($event)"
			(touched)="_onTouched?.()"
		>
			<hlm-switch-thumb />
		</brn-switch>
	`,
})
export class HlmSwitch implements ControlValueAccessor {
	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm(
			'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 dark:data-unchecked:bg-input/80 rounded-full border border-transparent focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] group/switch inline-flex shrink-0 items-center transition-all outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
			this.userClass(),
		),
	);

	/** The checked state of the switch. */
	public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
	public readonly checked = linkedSignal(this.checkedInput);

	/** Emits when the checked state of the switch changes. */
	public readonly checkedChange = output<boolean>();

	/** The disabled state of the switch. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The size of the switch. */
	public readonly size = input<BrnSwitchSize>('default');

	/** Used to set the id on the underlying brn element. */
	public readonly inputId = input<string | null>(null);

	/** Whether to force the input into an invalid state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Used to set the aria-label attribute on the underlying brn element. */
	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

	/** Used to set the aria-labelledby attribute on the underlying brn element. */
	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });

	/** Used to set the aria-describedby attribute on the underlying brn element. */
	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });

	protected readonly _disabled = linkedSignal(this.disabled);

	protected _onChange?: ChangeFn<boolean>;
	protected _onTouched?: TouchFn;

	protected handleChange(value: boolean): void {
		this.checked.set(value);
		this._onChange?.(value);
		this.checkedChange.emit(value);
	}

	/** CONTROL VALUE ACCESSOR */
	writeValue(value: boolean): void {
		this.checked.set(Boolean(value));
	}

	registerOnChange(fn: ChangeFn<boolean>): void {
		this._onChange = fn;
	}

	registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}
}

export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

import { BrnSwitch, BrnSwitchThumb, type BrnSwitchSize } from '@spartan-ng/brain/switch';
import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, input, linkedSignal, output } from '@angular/core';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
import { type ClassValue } from 'clsx';

@Directive({
	selector: '[hlmSwitchThumb],hlm-switch-thumb',
	hostDirectives: [BrnSwitchThumb],
	host: { 'data-slot': 'switch-thumb' },
})
export class HlmSwitchThumb {
	constructor() {
		classes(() => 'bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)] pointer-events-none block ring-0 transition-transform');
	}
}

export const HLM_SWITCH_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmSwitch),
	multi: true,
};

@Component({
	selector: 'hlm-switch',
	imports: [BrnSwitch, HlmSwitchThumb],
	providers: [HLM_SWITCH_VALUE_ACCESSOR],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'switch',
		class: 'contents',
		'[attr.aria-label]': 'null',
		'[attr.aria-labelledby]': 'null',
		'[attr.aria-describedby]': 'null',
	},
	template: `
		<brn-switch
			[class]="_computedClass()"
			[size]="size()"
			[checked]="checked()"
			[disabled]="_disabled()"
			[id]="inputId()"
			[forceInvalid]="forceInvalid()"
			[aria-label]="ariaLabel()"
			[aria-labelledby]="ariaLabelledby()"
			[aria-describedby]="ariaDescribedby()"
			(checkedChange)="handleChange($event)"
			(touched)="_onTouched?.()"
		>
			<hlm-switch-thumb />
		</brn-switch>
	`,
})
export class HlmSwitch implements ControlValueAccessor {
	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm(
			'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 dark:data-unchecked:bg-input/80 rounded-full border border-transparent shadow-xs focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] group/switch inline-flex shrink-0 items-center transition-all outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
			this.userClass(),
		),
	);

	/** The checked state of the switch. */
	public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
	public readonly checked = linkedSignal(this.checkedInput);

	/** Emits when the checked state of the switch changes. */
	public readonly checkedChange = output<boolean>();

	/** The disabled state of the switch. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The size of the switch. */
	public readonly size = input<BrnSwitchSize>('default');

	/** Used to set the id on the underlying brn element. */
	public readonly inputId = input<string | null>(null);

	/** Whether to force the input into an invalid state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Used to set the aria-label attribute on the underlying brn element. */
	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

	/** Used to set the aria-labelledby attribute on the underlying brn element. */
	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });

	/** Used to set the aria-describedby attribute on the underlying brn element. */
	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });

	protected readonly _disabled = linkedSignal(this.disabled);

	protected _onChange?: ChangeFn<boolean>;
	protected _onTouched?: TouchFn;

	protected handleChange(value: boolean): void {
		this.checked.set(value);
		this._onChange?.(value);
		this.checkedChange.emit(value);
	}

	/** CONTROL VALUE ACCESSOR */
	writeValue(value: boolean): void {
		this.checked.set(Boolean(value));
	}

	registerOnChange(fn: ChangeFn<boolean>): void {
		this._onChange = fn;
	}

	registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}
}

export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

import { BrnSwitch, BrnSwitchThumb, type BrnSwitchSize } from '@spartan-ng/brain/switch';
import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, input, linkedSignal, output } from '@angular/core';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
import { type ClassValue } from 'clsx';

@Directive({
	selector: '[hlmSwitchThumb],hlm-switch-thumb',
	hostDirectives: [BrnSwitchThumb],
	host: { 'data-slot': 'switch-thumb' },
})
export class HlmSwitchThumb {
	constructor() {
		classes(() => 'bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)] pointer-events-none block ring-0 transition-transform');
	}
}

export const HLM_SWITCH_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmSwitch),
	multi: true,
};

@Component({
	selector: 'hlm-switch',
	imports: [BrnSwitch, HlmSwitchThumb],
	providers: [HLM_SWITCH_VALUE_ACCESSOR],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'switch',
		class: 'contents',
		'[attr.aria-label]': 'null',
		'[attr.aria-labelledby]': 'null',
		'[attr.aria-describedby]': 'null',
	},
	template: `
		<brn-switch
			[class]="_computedClass()"
			[size]="size()"
			[checked]="checked()"
			[disabled]="_disabled()"
			[id]="inputId()"
			[forceInvalid]="forceInvalid()"
			[aria-label]="ariaLabel()"
			[aria-labelledby]="ariaLabelledby()"
			[aria-describedby]="ariaDescribedby()"
			(checkedChange)="handleChange($event)"
			(touched)="_onTouched?.()"
		>
			<hlm-switch-thumb />
		</brn-switch>
	`,
})
export class HlmSwitch implements ControlValueAccessor {
	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm(
			'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 dark:data-unchecked:bg-input/80 rounded-full border border-transparent focus-visible:ring-1 data-[matches-spartan-invalid=true]:ring-1 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] group/switch inline-flex shrink-0 items-center transition-all outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
			this.userClass(),
		),
	);

	/** The checked state of the switch. */
	public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
	public readonly checked = linkedSignal(this.checkedInput);

	/** Emits when the checked state of the switch changes. */
	public readonly checkedChange = output<boolean>();

	/** The disabled state of the switch. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The size of the switch. */
	public readonly size = input<BrnSwitchSize>('default');

	/** Used to set the id on the underlying brn element. */
	public readonly inputId = input<string | null>(null);

	/** Whether to force the input into an invalid state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Used to set the aria-label attribute on the underlying brn element. */
	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

	/** Used to set the aria-labelledby attribute on the underlying brn element. */
	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });

	/** Used to set the aria-describedby attribute on the underlying brn element. */
	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });

	protected readonly _disabled = linkedSignal(this.disabled);

	protected _onChange?: ChangeFn<boolean>;
	protected _onTouched?: TouchFn;

	protected handleChange(value: boolean): void {
		this.checked.set(value);
		this._onChange?.(value);
		this.checkedChange.emit(value);
	}

	/** CONTROL VALUE ACCESSOR */
	writeValue(value: boolean): void {
		this.checked.set(Boolean(value));
	}

	registerOnChange(fn: ChangeFn<boolean>): void {
		this._onChange = fn;
	}

	registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}
}

export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

import { BrnSwitch, BrnSwitchThumb, type BrnSwitchSize } from '@spartan-ng/brain/switch';
import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, input, linkedSignal, output } from '@angular/core';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
import { type ClassValue } from 'clsx';

@Directive({
	selector: '[hlmSwitchThumb],hlm-switch-thumb',
	hostDirectives: [BrnSwitchThumb],
	host: { 'data-slot': 'switch-thumb' },
})
export class HlmSwitchThumb {
	constructor() {
		classes(() => 'bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)] pointer-events-none block ring-0 transition-transform');
	}
}

export const HLM_SWITCH_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmSwitch),
	multi: true,
};

@Component({
	selector: 'hlm-switch',
	imports: [BrnSwitch, HlmSwitchThumb],
	providers: [HLM_SWITCH_VALUE_ACCESSOR],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'switch',
		class: 'contents',
		'[attr.aria-label]': 'null',
		'[attr.aria-labelledby]': 'null',
		'[attr.aria-describedby]': 'null',
	},
	template: `
		<brn-switch
			[class]="_computedClass()"
			[size]="size()"
			[checked]="checked()"
			[disabled]="_disabled()"
			[id]="inputId()"
			[forceInvalid]="forceInvalid()"
			[aria-label]="ariaLabel()"
			[aria-labelledby]="ariaLabelledby()"
			[aria-describedby]="ariaDescribedby()"
			(checkedChange)="handleChange($event)"
			(touched)="_onTouched?.()"
		>
			<hlm-switch-thumb />
		</brn-switch>
	`,
})
export class HlmSwitch implements ControlValueAccessor {
	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm(
			'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 dark:data-unchecked:bg-input/80 rounded-full border border-transparent focus-visible:ring-[3px] data-[matches-spartan-invalid=true]:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] group/switch inline-flex shrink-0 items-center transition-all outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
			this.userClass(),
		),
	);

	/** The checked state of the switch. */
	public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
	public readonly checked = linkedSignal(this.checkedInput);

	/** Emits when the checked state of the switch changes. */
	public readonly checkedChange = output<boolean>();

	/** The disabled state of the switch. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The size of the switch. */
	public readonly size = input<BrnSwitchSize>('default');

	/** Used to set the id on the underlying brn element. */
	public readonly inputId = input<string | null>(null);

	/** Whether to force the input into an invalid state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Used to set the aria-label attribute on the underlying brn element. */
	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

	/** Used to set the aria-labelledby attribute on the underlying brn element. */
	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });

	/** Used to set the aria-describedby attribute on the underlying brn element. */
	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });

	protected readonly _disabled = linkedSignal(this.disabled);

	protected _onChange?: ChangeFn<boolean>;
	protected _onTouched?: TouchFn;

	protected handleChange(value: boolean): void {
		this.checked.set(value);
		this._onChange?.(value);
		this.checkedChange.emit(value);
	}

	/** CONTROL VALUE ACCESSOR */
	writeValue(value: boolean): void {
		this.checked.set(Boolean(value));
	}

	registerOnChange(fn: ChangeFn<boolean>): void {
		this._onChange = fn;
	}

	registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}
}

export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

import { BrnSwitch, BrnSwitchThumb, type BrnSwitchSize } from '@spartan-ng/brain/switch';
import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, input, linkedSignal, output } from '@angular/core';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
import { type ClassValue } from 'clsx';

@Directive({
	selector: '[hlmSwitchThumb],hlm-switch-thumb',
	hostDirectives: [BrnSwitchThumb],
	host: { 'data-slot': 'switch-thumb' },
})
export class HlmSwitchThumb {
	constructor() {
		classes(() => 'bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)] pointer-events-none block ring-0 transition-transform');
	}
}

export const HLM_SWITCH_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmSwitch),
	multi: true,
};

@Component({
	selector: 'hlm-switch',
	imports: [BrnSwitch, HlmSwitchThumb],
	providers: [HLM_SWITCH_VALUE_ACCESSOR],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'switch',
		class: 'contents',
		'[attr.aria-label]': 'null',
		'[attr.aria-labelledby]': 'null',
		'[attr.aria-describedby]': 'null',
	},
	template: `
		<brn-switch
			[class]="_computedClass()"
			[size]="size()"
			[checked]="checked()"
			[disabled]="_disabled()"
			[id]="inputId()"
			[forceInvalid]="forceInvalid()"
			[aria-label]="ariaLabel()"
			[aria-labelledby]="ariaLabelledby()"
			[aria-describedby]="ariaDescribedby()"
			(checkedChange)="handleChange($event)"
			(touched)="_onTouched?.()"
		>
			<hlm-switch-thumb />
		</brn-switch>
	`,
})
export class HlmSwitch implements ControlValueAccessor {
	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm(
			'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 dark:data-unchecked:bg-input/80 rounded-full border border-transparent focus-visible:ring-2 data-[matches-spartan-invalid=true]:ring-2 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] group/switch inline-flex shrink-0 items-center transition-all outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
			this.userClass(),
		),
	);

	/** The checked state of the switch. */
	public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
	public readonly checked = linkedSignal(this.checkedInput);

	/** Emits when the checked state of the switch changes. */
	public readonly checkedChange = output<boolean>();

	/** The disabled state of the switch. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The size of the switch. */
	public readonly size = input<BrnSwitchSize>('default');

	/** Used to set the id on the underlying brn element. */
	public readonly inputId = input<string | null>(null);

	/** Whether to force the input into an invalid state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Used to set the aria-label attribute on the underlying brn element. */
	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

	/** Used to set the aria-labelledby attribute on the underlying brn element. */
	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });

	/** Used to set the aria-describedby attribute on the underlying brn element. */
	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });

	protected readonly _disabled = linkedSignal(this.disabled);

	protected _onChange?: ChangeFn<boolean>;
	protected _onTouched?: TouchFn;

	protected handleChange(value: boolean): void {
		this.checked.set(value);
		this._onChange?.(value);
		this.checkedChange.emit(value);
	}

	/** CONTROL VALUE ACCESSOR */
	writeValue(value: boolean): void {
		this.checked.set(Boolean(value));
	}

	registerOnChange(fn: ChangeFn<boolean>): void {
		this._onChange = fn;
	}

	registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}
}

export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

import { BrnSwitch, BrnSwitchThumb, type BrnSwitchSize } from '@spartan-ng/brain/switch';
import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, input, linkedSignal, output } from '@angular/core';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
import { type ClassValue } from 'clsx';

@Directive({
	selector: '[hlmSwitchThumb],hlm-switch-thumb',
	hostDirectives: [BrnSwitchThumb],
	host: { 'data-slot': 'switch-thumb' },
})
export class HlmSwitchThumb {
	constructor() {
		classes(() => 'bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full shadow-sm not-dark:bg-clip-padding group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-6 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-4 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-8px)] data-checked:rtl:-translate-x-[calc(100%-8px)] pointer-events-none block ring-0 transition-transform');
	}
}

export const HLM_SWITCH_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmSwitch),
	multi: true,
};

@Component({
	selector: 'hlm-switch',
	imports: [BrnSwitch, HlmSwitchThumb],
	providers: [HLM_SWITCH_VALUE_ACCESSOR],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'switch',
		class: 'contents',
		'[attr.aria-label]': 'null',
		'[attr.aria-labelledby]': 'null',
		'[attr.aria-describedby]': 'null',
	},
	template: `
		<brn-switch
			[class]="_computedClass()"
			[size]="size()"
			[checked]="checked()"
			[disabled]="_disabled()"
			[id]="inputId()"
			[forceInvalid]="forceInvalid()"
			[aria-label]="ariaLabel()"
			[aria-labelledby]="ariaLabelledby()"
			[aria-describedby]="ariaDescribedby()"
			(checkedChange)="handleChange($event)"
			(touched)="_onTouched?.()"
		>
			<hlm-switch-thumb />
		</brn-switch>
	`,
})
export class HlmSwitch implements ControlValueAccessor {
	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm(
			'data-checked:bg-primary data-unchecked:bg-input/90 data-checked:border-primary focus-visible:border-ring focus-visible:ring-ring/30 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-full border-2 focus-visible:ring-3 data-unchecked:border-transparent data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7 group/switch inline-flex shrink-0 items-center transition-all outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
			this.userClass(),
		),
	);

	/** The checked state of the switch. */
	public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
	public readonly checked = linkedSignal(this.checkedInput);

	/** Emits when the checked state of the switch changes. */
	public readonly checkedChange = output<boolean>();

	/** The disabled state of the switch. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The size of the switch. */
	public readonly size = input<BrnSwitchSize>('default');

	/** Used to set the id on the underlying brn element. */
	public readonly inputId = input<string | null>(null);

	/** Whether to force the input into an invalid state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Used to set the aria-label attribute on the underlying brn element. */
	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

	/** Used to set the aria-labelledby attribute on the underlying brn element. */
	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });

	/** Used to set the aria-describedby attribute on the underlying brn element. */
	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });

	protected readonly _disabled = linkedSignal(this.disabled);

	protected _onChange?: ChangeFn<boolean>;
	protected _onTouched?: TouchFn;

	protected handleChange(value: boolean): void {
		this.checked.set(value);
		this._onChange?.(value);
		this.checkedChange.emit(value);
	}

	/** CONTROL VALUE ACCESSOR */
	writeValue(value: boolean): void {
		this.checked.set(Boolean(value));
	}

	registerOnChange(fn: ChangeFn<boolean>): void {
		this._onChange = fn;
	}

	registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}
}

export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

Usage

import { HlmSwitch } from '@spartan-ng/helm/switch';

<hlm-switch />

Examples

Description

Share across devices

Focus is shared across devices, and turns off when you leave the app.

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-switch-description',
	imports: [HlmFieldImports, HlmSwitch],
	template: `
		<hlm-field orientation="horizontal" class="max-w-sm">
			<hlm-field-content>
				<label hlmFieldLabel for="switch-focus-mode">Share across devices</label>
				<p hlmFieldDescription>Focus is shared across devices, and turns off when you leave the app.</p>
			</hlm-field-content>
			<hlm-switch inputId="switch-focus-mode" />
		</hlm-field>
	`,
})
export class SwitchDescription {}

Choice Card

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode is enabled or disabled.

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-switch-choice-card',
	imports: [HlmFieldImports, HlmSwitch],
	host: { class: 'min-w-xs sm:min-w-sm' },
	template: `
		<hlm-field-group class="w-full max-w-sm">
			<label hlmFieldLabel for="switch-share">
				<hlm-field orientation="horizontal">
					<hlm-field-content>
						<hlm-field-title for="switch-focus-mode">Share across devices</hlm-field-title>
						<p hlmFieldDescription>Focus is shared across devices, and turns off when you leave the app.</p>
					</hlm-field-content>
					<hlm-switch inputId="switch-share" />
				</hlm-field>
			</label>
			<label hlmFieldLabel for="switch-notifications">
				<hlm-field orientation="horizontal">
					<hlm-field-content>
						<hlm-field-title for="switch-focus-mode">Enable notifications</hlm-field-title>
						<p hlmFieldDescription>Receive notifications when focus mode is enabled or disabled.</p>
					</hlm-field-content>
					<hlm-switch inputId="switch-notifications" />
				</hlm-field>
			</label>
		</hlm-field-group>
	`,
})
export class SwitchChoiceCard {}

Disabled

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-switch-disabled',
	imports: [HlmFieldImports, HlmSwitch],
	template: `
		<hlm-field orientation="horizontal" data-disabled="true">
			<hlm-switch inputId="switch-disabled" disabled />
			<label hlmFieldLabel for="switch-disabled">Disabled</label>
		</hlm-field>
	`,
})
export class SwitchDisabled {}

Invalid

Accept terms and conditions

You must accept the terms and conditions to continue.

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-switch-invalid',
	imports: [HlmFieldImports, HlmSwitch],
	template: `
		<hlm-field orientation="horizontal" class="max-w-sm" forceInvalid>
			<hlm-field-content>
				<label hlmFieldLabel for="switch-invalid">Accept terms and conditions</label>
				<p hlmFieldDescription>You must accept the terms and conditions to continue.</p>
			</hlm-field-content>
			<hlm-switch inputId="switch-invalid" forceInvalid />
		</hlm-field>
	`,
})
export class SwitchInvalid {}

Sizes

Small

Default

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-switch-sizes',
	imports: [HlmFieldImports, HlmSwitch],
	host: { class: 'w-full max-w-40' },
	template: `
		<hlm-field-group>
			<hlm-field orientation="horizontal">
				<hlm-switch inputId="switch-size-sm" size="sm" />
				<label hlmFieldLabel for="switch-size-sm">Small</label>
			</hlm-field>
			<hlm-field orientation="horizontal">
				<hlm-switch inputId="switch-size-default" />
				<label hlmFieldLabel for="switch-size-default">Default</label>
			</hlm-field>
		</hlm-field-group>
	`,
})
export class SwitchSizes {}

RTL

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

المشاركة عبر الأجهزة

يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.

import { Component, computed, inject } from '@angular/core';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-switch-rtl-preview',
	imports: [HlmFieldImports, HlmSwitch],
	host: {
		'[dir]': '_dir()',
	},
	template: `
		<hlm-field orientation="horizontal" class="max-w-sm">
			<hlm-field-content>
				<label hlmFieldLabel for="switch-focus-mode-rtl">{{ _t()['label'] }}</label>
				<p hlmFieldDescription>{{ _t()['description'] }}</p>
			</hlm-field-content>
			<hlm-switch inputId="switch-focus-mode-rtl" />
		</hlm-field>
	`,
})
export class SwitchRtlPreview {
	private readonly _language = inject(TranslateService).language;
	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				label: 'Share across devices',
				description: 'Focus is shared across devices, and turns off when you leave the app.',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				label: 'المشاركة عبر الأجهزة',
				description: 'يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				label: 'שיתוף בין מכשירים',
				description: 'המיקוד משותף בין מכשירים, וכבה כשאתה עוזב את האפליקציה.',
			},
		},
	};

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

Brain API

BrnSwitchThumb

Selector: [brnSwitchThumb],brn-switch-thumb

BrnSwitch

Selector: brn-switch

Inputs

Prop	Type	Default	Description
checked	boolean	false	Whether switch is checked/toggled on. Can be bound with [(checked)] for two-way binding.
id	string \| null	++uniqueIdCounter + ''	Unique identifier for switch component. When provided, inner button gets ID without '-switch' suffix. Auto-generates ID if not provided.
name	string \| null	null	Form control name for switch. When provided, inner button gets name without '-switch' suffix.
class	string \| null	null	CSS classes applied to inner button element.
hostStyles	string	'display: contents'	Styles applied to the host element. Bound via `[style]` so they apply through the CSSOM and are not blocked by a strict Content-Security-Policy.
size	BrnSwitchSize	'default'	Size of the switch. Drives the size-keyed registry style rules via the `data-size` attribute.
forceInvalid	boolean	false	Whether to force the input into an invalid state.
aria-label	string \| null	null	Accessibility label for screen readers. Use when no visible label exists.
aria-labelledby	string \| null	null	ID of element that labels this switch for accessibility. Auto-set when switch is inside label element.
aria-describedby	string \| null	null	ID of element that describes this switch for accessibility.
required	boolean	false	Whether switch is required in a form.
disabled	boolean	false	Whether switch is disabled. Disabled switches cannot be toggled and indicate disabled state with data attribute.
tabIndex	number	0	Keyboard tab order for switch.

Outputs

Prop	Type	Default	Description
checkedChange	boolean	-	Emits when checked state changes.
touched	void	-	Event emitted when switch is blurred (loses focus). Used for form validation.

Helm API

HlmSwitchThumb

Selector: [hlmSwitchThumb],hlm-switch-thumb

HlmSwitch

Selector: hlm-switch

Inputs

Prop	Type	Default	Description
class	ClassValue	''	-
checked	boolean	false	The checked state of the switch.
disabled	boolean	false	The disabled state of the switch.
size	BrnSwitchSize	'default'	The size of the switch.
inputId	string \| null	null	Used to set the id on the underlying brn element.
forceInvalid	boolean	false	Whether to force the input into an invalid state.
aria-label	string \| null	null	Used to set the aria-label attribute on the underlying brn element.
aria-labelledby	string \| null	null	Used to set the aria-labelledby attribute on the underlying brn element.
aria-describedby	string \| null	null	Used to set the aria-describedby attribute on the underlying brn element.

Outputs

Prop	Type	Default	Description
checkedChange	boolean	-	Emits when the checked state of the switch changes.

Table

Spinner

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Switch

Installation

1 Copy utils if needed

2 Copy and paste the following code into your project.

Usage

Examples

Description

Choice Card

Disabled

Invalid

Sizes

RTL

Brain API

BrnSwitchThumb

BrnSwitch

Inputs

Outputs

Helm API

HlmSwitchThumb

HlmSwitch

Inputs

Outputs