Toggle
Boolean switch component. Works with ngModel, formControl, and formControlName.
Keyboard: Space to toggle. ARIA: role="switch", aria-checked, aria-disabled.
Sizes
Small
Tight layouts, table cells, or dense form rows.
Medium (default)
Standard form controls and most UI contexts.
Large
Touch targets, prominent CTAs, or accessibility-first interfaces.
States
Default (off)
Uncontrolled — click to toggle.
Default (on)
Starts on — uncontrolled.
Disabled (off)
Non-interactive via [disabled].
Disabled (on)
Checked + disabled via FormControl.disable().
Inline label
Label after (default)
Label appears after the toggle (labelPosition="after").
Label before
Label appears before the toggle (labelPosition="before").
Template-driven (ngModel)
Two-way binding
Bound via [(ngModel)].
ngModel value: false
Reactive forms
FormControl
Bound via [formControl].
value: false | touched: false
setDisabledState
Enable/disable the control from code.
Custom token
Override colours via CSS custom properties.