@styloviz/toggle-switch

Accessible on/off toggle switch with labels, sizes and disabled state.

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/toggle-switch

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvToggleSwitchComponent } from '@styloviz/toggle-switch';

@Component({
  standalone: true,
  imports: [SvToggleSwitchComponent],
  template: `
    <sv-toggle-switch />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | checked | boolean (two-way) | false | Current on/off state. Use [(checked)] for two-way binding. | | label | string | '' | Visible label text. | | description | string | '' | Smaller descriptor line beneath the label. | | labelPosition | ToggleLabelPosition | 'right' | Position of the label relative to the track. | | onLabel | string | '' | Text shown inside the track when ON. Keep ≤ 3 characters for md size, fewer for smaller sizes. | | offLabel | string | '' | Text shown inside the track when OFF. | | onIconPath | string | '' | SVG <path d="..."> rendered inside the thumb when the toggle is ON. Omit to show a plain thumb. | | offIconPath | string | '' | SVG <path d="..."> rendered inside the thumb when the toggle is OFF. | | size | ToggleSize | 'md' | Size of the toggle track and thumb. | | variant | ToggleVariant | 'primary' | Active-state color variant. | | disabled | boolean | false | Disable interaction. | | required | boolean | false | Mark the control as required (sets aria-required). | | loading | boolean | false | Show a spinner in the thumb — useful while an async action is in-flight. Implicitly disables interaction while true. | | ariaLabel | string | '' | aria-label override — required when labelPosition === 'hidden' so screen readers still announce the control's purpose. | | inputId | string | '' | id forwarded to the hidden <input> for <label for=""> use. | | customClass | string | '' | Additional CSS classes on the root wrapper element. |

Outputs

| Output | Type | Description | | --- | --- | --- | | toggled | boolean | Emits the new boolean state after every toggle. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs

License

MIT