Switch
A control that allows the user to toggle between checked and not checked.
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
npx nx g @spartan-ng/cli:ui switch
ng g @spartan-ng/cli:ui switch
Usage
import { HlmSwitchComponent } from '@spartan-ng/helm/switch';<hlm-switch />Brain API
BrnSwitchNgModelSpec
Selector: brn-switch-ng-model
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | - | - |
| airplaneMode | boolean | - | - |
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 |
|---|---|---|---|
| changed | boolean | - | Event emitted when switch value changes. Emits new checked state (true/false). |
| 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 |
|---|---|---|---|
| changed | boolean | - | Emits when the checked state of the switch changes. |
| checkedChanged | boolean | false | The checked state of the switch. |