AngularLynx

    Switch

    An on/off switch for settings, with a thumb that springs across when tapped.

    ui-switchsrc/app/app.ts

    Installation

    npx @blotch/dolan add switch
    import { UiSwitch } from '../components/ui/switch';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import { UiLabel } from '../components/ui/label';
import { UiSwitch } from '../components/ui/switch';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, UiLabel, UiSwitch],
  template: `
    <view class="flex flex-row items-center justify-between">
      <ui-label>Bluetooth</ui-label>
      <ui-switch [(checked)]="bluetooth" />
    </view>
  `,
})
export class App {
  protected readonly bluetooth = signal(false);
}
    • This example also uses Label.
    • The track is the primary color when on and the input color when off.
    • The switch is 44 by 24 pixels, set in pixels so it looks the same at any font size.

    Disabled

    <view class="flex flex-row gap-3">
  <ui-switch [disabled]="true" />
  <ui-switch [disabled]="true" [checked]="true" />
</view>

    A disabled switch dims and ignores taps.

    Listen without a signal

    <ui-switch (changed)="onNotifications($event)" />

    changed emits the new state after each tap.

    API

    UiSwitch

    InputTypeDefaultDescription
    checkedbooleanfalseWhether it's on. Supports [(checked)].
    disabledbooleanfalseDims the switch and ignores taps.
    classstring''Extra Tailwind classes for the track.
    OutputTypeDescription
    changedbooleanEmits the new state after a tap.
    checkedChangebooleanEmits the new state, for [(checked)].

    UiSwitch also has a public toggle() method, which does nothing while disabled.

    • Checkbox: for agreeing or picking options in a form
    • Toggle: a button that stays pressed
    • Label