@kit-ng-ui/switch

The Switch component for Kit UI — a binary on/off toggle.

Install

pnpm add @kit-ng-ui/switch @kit-ng-ui/core @kit-ng-ui/icons

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/switch/styles' as switch;

Use

import { Component, signal } from '@angular/core';
import { KitSwitchComponent } from '@kit-ng-ui/switch';

@Component({
  standalone: true,
  imports: [KitSwitchComponent],
  template: `
    <kit-switch [(checked)]="enabled" />
    <kit-switch size="sm" />
    <kit-switch checkedLabel="ON" uncheckedLabel="OFF" />
    <kit-switch checkedIcon="check" uncheckedIcon="close" />
    <kit-switch [loading]="saving()" />
    <kit-switch disabled />
  `,
})
export class SwitchDemo {
  enabled = signal(false);
  saving = signal(false);
}

API

| Input | Type | Default | | ---------------- | --------------------- | ----------- | | checked | boolean | false | | disabled | boolean | false | | loading | boolean | false | | size | 'sm' \| 'md' | 'md' | | checkedLabel | string \| null | null | | uncheckedLabel | string \| null | null | | checkedIcon | string \| null | null | | uncheckedIcon | string \| null | null |

Outputs: (checkedChange), (change).

Implements ControlValueAccessor — works with ngModel and reactive forms.

Behavior notes

• Renders as <button role="switch"> and exposes aria-checked. Space and Enter toggle.
• [loading] adds a spinner inside the handle and prevents interaction (clicks and keyboard ignored).
• The "inner" label/icon flips position with the handle: shown on the trailing side when off, on the leading side when on.

Performance notes

• The handle moves between checked and unchecked positions by animating the CSS left property rather than transform: translateX(...). transform would be cheaper per-frame (composited only) but the switch can grow past its --kit-switch-w track width when the checked/unchecked content is wider than the minimum, and transform with a fixed offset would leave the knob short of the right edge in that case. The transition runs only on a discrete two-state change, so the layout/paint cost is paid once per toggle. If you render large grids of switches that all animate simultaneously, expect a more noticeable frame budget than a pure composite-only transition.