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

Usage

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

<hlm-switch />

Brain API

BrnSwitchThumb

Selector: brn-switch-thumb

BrnSwitch

Selector: brn-switch

Inputs

Prop	Type	Default	Description
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.
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	unknown	0	Keyboard tab order for switch.
checked	boolean	false	Whether switch is checked/toggled on. Can be bound with [(checked)] for two-way binding.

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.
checkedChanged	boolean	false	Whether switch is checked/toggled on. Can be bound with [(checked)] for two-way binding.

Helm API

HlmSwitchThumb

Selector: brn-switch-thumb[hlm],[hlmSwitchThumb]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmSwitch

Selector: hlm-switch

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
disabled	boolean	false	The disabled state of the switch.
id	string \| null	null	Used to set the id on the underlying brn element.
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.
checked	boolean	false	The checked state of the switch.

Outputs

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

Table

Spinner

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.