Toggle

<!-- Standalone two-state button -->
<button forToggle [(checked)]="bold">B</button>

<!-- Group of toggle buttons (single or multiple selection) -->
<div forToggleGroup [(value)]="format" multiple>
  <button forToggleGroupItem value="bold">B</button>
  <button forToggleGroupItem value="italic">I</button>
  <button forToggleGroupItem value="underline">U</button>
</div>

ForToggle implements FormCheckboxControl, so a single aria-pressed toggle (the natural home for bold / italic, mute, or favourite buttons) auto-wires with [formField] from @angular/forms/signals. The schema's disabled, readonly, required, invalid, pending, dirty, errors, and touched flow into the matching inputs without consumer glue.

import { Component, signal } from '@angular/core';
import { form, FormField, required } from '@angular/forms/signals';
import { ForToggle } from 'forty-cdk/toggle';

@Component({
  selector: 'demo-bold',
  imports: [ForToggle, FormField],
  template: ` <button forToggle [formField]="prefs.bold" aria-label="Bold">B</button> `,
})
export class DemoBold {
  readonly model = signal({ bold: false });
  readonly prefs = form(this.model, (s) => required(s.bold));
}

When [name] is set (typically through [formField]), the directive mounts an <input type="hidden" value="on"> sibling while checked so the surrounding <form> picks it up during native submission.

For a set of related toggles, ForToggleGroup implements FormValueControl<readonly string[]> instead: its value is readonly string[], and a single-mode group simply carries [] or [selected].

ForToggleGroup implements FormValueControl<readonly string[]>, so it auto-wires with [formField] from @angular/forms/signals. The schema's disabled, readonly, required, invalid, pending, dirty, errors, touched, and name flow into the matching inputs without consumer glue.

import { Component, signal } from '@angular/core';
import { form, required, requiredError, validate } from '@angular/forms/signals';
import { ForToggleGroup, ForToggleGroupItem } from 'forty-cdk/toggle';

@Component({
  selector: 'demo-formats',
  imports: [ForToggleGroup, ForToggleGroupItem /* , FormField from @angular/forms */],
  template: `
    <div forToggleGroup multiple [formField]="prefs.formats" aria-label="Formats">
      <button forToggleGroupItem value="bold">B</button>
      <button forToggleGroupItem value="italic">I</button>
      <button forToggleGroupItem value="underline">U</button>
    </div>
  `,
})
export class DemoFormats {
  readonly model = signal({ formats: [] as string[] });
  readonly prefs = form(this.model, (s) => {
    required(s.formats);
    validate(s.formats, ({ value }) =>
      value().length === 0 ? requiredError({ message: 'Pick at least one format' }) : undefined,
    );
  });
}

Requiring a non-empty selection. ForToggleGroup's value is a readonly string[], and Angular's required() treats only '', false, null, and NaN as empty. An empty array [] counts as present, so required(s.formats) reflects data-required but never makes the form invalid on its own. Enforce "at least one" with the explicit validate(...) length rule above, or with Angular's minLength(s.formats, 1) (which emits a minLengthError instead of a requiredError). The single-boolean ForToggle above is unaffected: required(s.bold) works because false is treated as empty.

When [name] is set (typically through [formField]), the directive mounts one <input type="hidden"> sibling per selected value so the surrounding <form> picks the values up during native submission.

Choose between the two form-control shapes by the value you need: ForToggle (FormCheckboxControl, a single boolean) for one independent on/off button, ForToggleGroup (FormValueControl<readonly string[]>) for a set of related toggles whose selection is a list.

ForToggle

ForToggleGroup

ForToggleGroupItem

• Enter / Space on the focused item toggles it (native button behavior).
• ArrowLeft / ArrowRight moves focus in horizontal mode (or vertical, swapped via orientation). Disabled items are skipped.
• ArrowUp / ArrowDown moves focus in vertical mode.
• Home / End jump to the first / last enabled item.
• Tab enters and exits the group at the entry-point item. Before any interaction that is the first selected item, or the first enabled item when no value is selected; once you move focus with the arrows (or Home / End), the tab stop follows the last focused item, so Shift+Tab back into the group restores it.

Arrow keys move focus only. Selection requires an explicit click or Space / Enter. There is no selection-on-focus, unlike [forRadioGroup].

Implements the WAI-ARIA Button pattern (toggle-button variant).

• [forToggle] emits role="button" with aria-pressed="true|false", which screen readers announce as "toggle button".
• [forToggleGroup] emits role="group" and reflects data-orientation for CSS (not aria-orientation). Provide a label via aria-label or aria-labelledby.
• Roving tabindex manages focus within the group. The consumer never sets tabindex manually.
• A disabled item stays focusable (per APG): it reflects aria-disabled="true" + data-disabled="" rather than native disabled, so assistive tech still announces it while interaction is a no-op.
• readonly has no ARIA channel here. WAI-ARIA supports aria-readonly on neither role="button" nor role="group", so a read-only toggle / group reflects the boolean data-readonly styling hook only and interaction is blocked in the handler.

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).

.toggle {
  background: var(--surface);
}

.toggle[data-state='checked'] {
  background: var(--accent);
}

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

• data-state uses the form-control vocabulary "checked" | "unchecked" (per CLAUDE.md cross-primitive convention), even though ARIA uses aria-pressed. The data attribute mirrors the logical "is this option active" state, not the ARIA term.
• Single mode lets the user reach the [] state by clicking the currently pressed item again. Set deselectable="false" to keep the pressed item pressed instead, for a segmented button whose arrows move focus only, or use [forRadioGroup] if you need to enforce one-of-N with the selection following the arrow keys.
• Roving tabindex follows focus: once any item is focused, that item becomes the tab stop so re-entry restores it. Before any focus, the entry point is computed from the group's value: the first selected item when there is at least one selection, otherwise the first enabled item in DOM order. The consumer never sets tabindex manually.

Wrapping form primitives documents both supported wrapper patterns: hostDirectives with the exported FOR_TOGGLE_HOST_DIRECTIVE_INPUTS / FOR_TOGGLE_HOST_DIRECTIVE_OUTPUTS and FOR_TOGGLE_GROUP_HOST_DIRECTIVE_INPUTS / FOR_TOGGLE_GROUP_HOST_DIRECTIVE_OUTPUTS name tuples, and subclassing.