Primitives

Switch

A binary on / off control toggled by click, Enter or Space.

forty-cdk/switch WAI-ARIA APG

Toggle it with the pointer, Space or Enter, and watch data-state follow.

Notifications off

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ForSwitch } from 'forty-cdk/switch';

@Component({
  selector: 'app-switch-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForSwitch],
  template: `
    <div class="row">
      <button forSwitch class="switch" [(checked)]="enabled">
        <span class="thumb"></span>
      </button>
      <span class="text">Notifications {{ enabled() ? 'on' : 'off' }}</span>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .row {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
    }

    .text {
      font-weight: 500;
    }

    .switch {
      position: relative;
      width: 46px;
      height: 26px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: var(--ex-border-strong, #d0c9bc);
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .switch[data-state='checked'] {
      background: var(--ex-accent, #0e7c6b);
    }

    .thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      transition: transform 0.2s ease;
    }

    .switch[data-state='checked'] .thumb {
      transform: translateX(20px);
    }

    @media (prefers-reduced-motion: reduce) {
      .switch,
      .thumb {
        transition: none;
      }
    }
  `,
})
export class SwitchDefaultExample {
  protected readonly enabled = signal(false);
}

Headless and styleless, it doubles as a FormCheckboxControl for Angular Signal Forms. A switch changes state immediately on activation, so it is semantically distinct from a checkbox (which represents a deferred selection).

When to choose

Switch: immediate setting (flipping it changes the world right now). Always binary.
Checkbox: deferred selection (user is choosing options for a form to apply later). Supports tri-state.

Use the one that matches your semantics. ForSwitch and ForCheckbox are intentionally separate even though they share most of their state surface.

Anatomy

<button forSwitch [(checked)]="enabled">
  <span class="thumb"></span>
</button>

<!-- With Signal Forms — [formField] wires value, validity and touched: -->
<button forSwitch [formField]="settings.notifications"></button>

Examples

States

One class and one directive, three states. disabled and readonly both keep the switch focusable and announced (per APG) while interaction is a no-op; they reflect aria-disabled / data-disabled and aria-readonly / data-readonly, which is all the example's stylesheet keys on.

Source

Default

Disabled

Read-only

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ForSwitch } from 'forty-cdk/switch';

@Component({
  selector: 'app-switch-states-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForSwitch],
  template: `
    <div class="states">
      <div class="state">
        <span class="state-label">Default</span>
        <button forSwitch class="switch" [(checked)]="enabled">
          <span class="thumb"></span>
        </button>
      </div>

      <div class="state">
        <span class="state-label">Disabled</span>
        <button forSwitch class="switch" [(checked)]="enabled" disabled>
          <span class="thumb"></span>
        </button>
      </div>

      <div class="state">
        <span class="state-label">Read-only</span>
        <button forSwitch class="switch" [(checked)]="enabled" readonly>
          <span class="thumb"></span>
        </button>
      </div>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .states {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 1.8rem;
    }

    .state {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .state-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ex-muted, #585d66);
    }

    .switch {
      position: relative;
      width: 46px;
      height: 26px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: var(--ex-border-strong, #d0c9bc);
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .switch[data-state='checked'] {
      background: var(--ex-accent, #0e7c6b);
    }

    .switch[data-disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .switch[data-readonly] {
      cursor: default;
    }

    .thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      transition: transform 0.2s ease;
    }

    .switch[data-state='checked'] .thumb {
      transform: translateX(20px);
    }

    @media (prefers-reduced-motion: reduce) {
      .switch,
      .thumb {
        transition: none;
      }
    }
  `,
})
export class SwitchStatesExample {
  protected readonly enabled = signal(true);
}

Signal Forms

forSwitch implements FormCheckboxControl, so a single [formField] binding wires checked state, validity and touched both ways without a ControlValueAccessor.

Source

I accept the privacy policy

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { form, FormField, requiredError, validate } from '@angular/forms/signals';
import { ForSwitch } from 'forty-cdk/switch';

interface Consent {
  readonly privacy: boolean;
}

@Component({
  selector: 'app-switch-form-field-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [FormField, ForSwitch],
  template: `
    <div class="form">
      <div class="row">
        <button
          forSwitch
          class="switch"
          [formField]="consentForm.privacy"
          aria-label="Accept the privacy policy"
        >
          <span class="thumb"></span>
        </button>
        <span class="text">I accept the privacy policy</span>
      </div>
      @if (consentForm.privacy().touched() && !consentForm.privacy().valid()) {
        <p class="error">You must accept the privacy policy to continue.</p>
      }
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .form {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .row {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
    }

    .text {
      font-weight: 500;
    }

    .switch {
      position: relative;
      width: 46px;
      height: 26px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: var(--ex-border-strong, #d0c9bc);
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .switch[data-state='checked'] {
      background: var(--ex-accent, #0e7c6b);
    }

    .switch[data-touched][data-invalid] {
      outline: 2px solid #ef4444;
      outline-offset: 3px;
    }

    .thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      transition: transform 0.2s ease;
    }

    .switch[data-state='checked'] .thumb {
      transform: translateX(20px);
    }

    .error {
      margin: 0;
      font-size: 0.85rem;
      color: #ef4444;
    }

    @media (prefers-reduced-motion: reduce) {
      .switch,
      .thumb {
        transition: none;
      }
    }
  `,
})
export class SwitchFormFieldExample {
  protected readonly model = signal<Consent>({ privacy: false });
  protected readonly consentForm = form(this.model, (path) => {
    validate(path.privacy, (ctx) =>
      ctx.value() ? undefined : requiredError({ message: 'Accept the privacy policy' }),
    );
  });
}

API

`ForSwitch`

Property	Type	Description
`checked`	`model`	Two-way bindable on/off state. Required by `FormCheckboxControl`. Default: —
`disabled`	`input`	Ignores click; reflects `aria-disabled="true"` and `data-disabled`. Stays focusable (per APG). Default: —
`readonly`	`input`	Ignores click; reflects `aria-readonly="true"`. Stays focusable. Default: —
`required`	`input`	Reflects `aria-required="true"`. Default: —
`invalid`	`input`	Reflects `aria-invalid="true"`. Default: —
`pending`	`input`	Reflects `aria-busy="true"` while async validation is in flight. Default: —
`name`	`input`	Reflects on `name`. Default: —
`errors`	`input`	Validation errors fed by `[formField]`. The directive does not render them, since that is consumer territory. Default: —
`touched`	`model`	Set to `true` on blur. Two-way so the field can read it back. Default: —

Data attribute	Values
`data-state`	`checked` \| `unchecked`
`data-disabled`	present \| absent
`data-readonly`	present \| absent
`data-touched`	present \| absent
`data-dirty`	present \| absent
`data-pending`	present \| absent
`data-invalid`	present \| absent

Keyboard

Key	Action
`Space`	Toggle the switch.
`Enter`	Also toggles (a documented superset of the APG).

Both keys work on any host element. On a <button> they come from native button behavior; on any other host (<div>, <span>, or a hostDirectives wrapper's own host) the directive adds tabindex="0" and synthesizes the same activation. Space keydown always blocks page scrolling; the toggle fires on its keyup.

Accessibility

Implements the WAI-ARIA Switch pattern.

Prefer a <button>. The directive forces type="button" through a host binding to prevent submit-by-Enter inside a <form> (a consumer type="submit" on the host is overridden, not honoured), and Enter / Space toggle the switch via native button behavior. Any other host element (e.g. <div>) works too: it gets tabindex="0" and the same Enter / Space activation synthesized, so role="switch" is never announced on an element a keyboard user cannot reach; it gets no type attribute at all, since type is not valid there.
A disabled switch stays focusable (per APG): it reflects aria-disabled="true" + data-disabled="" rather than the native disabled attribute, so assistive tech still announces it while click / keyboard activation is a no-op. Form-submit exclusion is handled by the hidden <input>, not the visible button.
role="switch" is announced as "switch, on/off" by screen readers, distinct from "checkbox, checked/not checked".
@angular/forms is an optional peer. If you're not using Signal Forms, don't install it: the directive runs fine without it (only the type import from @angular/forms/signals is type-only and erased at build).

Styling

forty-cdk ships no styles: put your own class on each piece and key your CSS off the data-* attributes listed under API, not off the for* selectors (Styling forty-cdk explains why).

.switch .thumb {
  transition: transform 150ms;
}

.switch[data-state='checked'] .thumb {
  transform: translateX(100%);
}

Wrapping in a design system

Wrapping form primitives documents both supported wrapper patterns: hostDirectives with the exported FOR_SWITCH_HOST_DIRECTIVE_INPUTS / FOR_SWITCH_HOST_DIRECTIVE_OUTPUTS name tuples, and subclassing.