Toolbar
Beta

Toggle

A binary switch control that toggles between on and off states, with full keyboard support and form integration.

Import

import {FktToggleComponent} from "frakton-ng/toggle";

Basic usage

Default toggle in off state with a visible label.

States

All visual states: off, on, disabled off, and disabled on.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Hidden label

Toggle with the label hidden visually but still accessible to screen readers via aria-label.

Reactive forms

Integration with Angular Reactive Forms via formControl. Uses Validators.requiredTrue to enforce that the toggle must be enabled, with error display and disable toggling.

Signal forms

Integration with the signal-based @angular/forms/signals API via the [formField] binding. Shows required validation and signal-driven disabled state.

Input driven

Manual signal-driven binding using [(value)] and [(touched)] two-way models without a form abstraction. Validation is handled directly in the template.

Toggle

Key Features

  • Binary on/off control with smooth slide animation
  • role="switch" with aria-checked for correct screen reader semantics
  • Keyboard activation via Space and Enter
  • Optional visible label with hideLabel for icon-only or inline layouts
  • Form-friendly: implements ControlValueAccessor and signal-based FormValueControl
  • Disabled state prevents interaction and communicates via aria-disabled
  • Works with design tokens for sizing and color

Configuration Options

Accessibility

  • Uses role="switch" so screen readers announce on/off state correctly
  • aria-checked reflects the current value reactively
  • aria-disabled signals non-interactive state without removing focus from the DOM (tabindex is still -1 when disabled)
  • aria-errormessage forwards the first validation error message to assistive technologies
  • Label is visually rendered when hideLabel is false; aria-label provides the accessible name regardless

Usage

  • Use for single boolean preferences (notifications, dark mode, feature flags)
  • For terms acceptance or required agreements, combine with fkt-field-error and a required validator
  • Pair touched with invalid in input-driven mode to only show errors after user interaction
  • In reactive forms, use Validators.requiredTrue to enforce that the toggle must be enabled