# Switch Switch builds on the shared field foundation, so it supports labels, helper and error text, validation hooks, disabled and readonly states, and Angular forms integration. It keeps the interaction model close to a native checkbox while presenting a Fluent-style toggle surface. ## Import ```ts import { SwitchComponent } from 'ui'; ``` ## Basic toggles ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SwitchComponent } from 'ui'; @Component({ selector: 'app-switch-basic-example', standalone: true, imports: [FormsModule, SwitchComponent], template: `

`, }) export class SwitchBasicExampleComponent { protected desktopNotifications = true; protected autosaveDrafts = true; protected shareInsights = false; } ``` ## Label positions ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SwitchComponent } from 'ui'; @Component({ selector: 'app-switch-label-positions-example', standalone: true, imports: [FormsModule, SwitchComponent], template: `

Hidden visible label

`, }) export class SwitchLabelPositionsExampleComponent { protected afterValue = true; protected beforeValue = false; protected aboveValue = true; protected belowValue = false; protected hiddenLabelValue = true; } ``` ## Sizes and states ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SwitchComponent } from 'ui'; @Component({ selector: 'app-switch-sizes-states-example', standalone: true, imports: [FormsModule, SwitchComponent], template: `

`, }) export class SwitchSizesStatesExampleComponent { protected compactValue = false; protected defaultValue = true; protected prominentValue = true; } ``` ## Helper text and validation ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, SwitchComponent } from 'ui'; @Component({ selector: 'app-switch-helper-validation-example', standalone: true, imports: [FormsModule, ButtonComponent, SwitchComponent], template: `

Continue

`, }) export class SwitchHelperValidationExampleComponent { protected allowDeploy = true; protected rollbackConfirmed = false; protected confirmationError = ''; protected statusText = 'Validation appears only when the confirmation is still missing.'; protected submit(): void { if (!this.rollbackConfirmed) { this.confirmationError = 'Review confirmation is required before continuing.'; this.statusText = 'Confirmation is still missing.'; return; } this.confirmationError = ''; this.statusText = 'Release checks are complete. The flow can continue.'; } } ``` ## Preferences form ```ts import { Component } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { SwitchComponent } from 'ui'; @Component({ selector: 'app-switch-preferences-form-example', standalone: true, imports: [ReactiveFormsModule, SwitchComponent], template: `

`, }) export class SwitchPreferencesFormExampleComponent { protected readonly preferencesForm = new FormGroup({ summaryEmail: new FormControl(true, { nonNullable: true }), mentions: new FormControl(true, { nonNullable: true }), calendarReminders: new FormControl(false, { nonNullable: true }), marketing: new FormControl(false, { nonNullable: true }), }); } ``` ## Notification control panel ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, SliderComponent, SwitchComponent } from 'ui'; @Component({ selector: 'app-switch-notification-panel-example', standalone: true, imports: [FormsModule, ButtonComponent, SliderComponent, SwitchComponent], template: `

Incident notification policy

Configure how aggressively owners are notified when service health degrades.

Save policy

Preview digest

`, }) export class SwitchNotificationPanelExampleComponent { protected smartAlerts = true; protected escalateManager = true; protected smsFallback = false; protected threshold = 65; protected readonly describeThreshold = (value: number) => `${value} percent threshold`; } ``` ## Accessibility ### Accessible name The inner checkbox uses `ariaLabel` when provided and otherwise falls back to the visible `label`. If you render the switch with `labelPosition="none"`, provide an explicit accessible name. | Source | Accessible name | | --- | --- | | `ariaLabel` | explicit accessible name | | visible `label` | default fallback | | no label + no `ariaLabel` | avoid this state | ### Keyboard and role Because the control is backed by a native checkbox input, standard keyboard behavior applies while the UI stays visually switch-like. | Key | Action | | --- | --- | | `Tab` | moves focus to or from the switch | | `Space` | toggles checked state when interactive | | State | Attribute | | --- | --- | | on / off | native checkbox checked state | | disabled | native `disabled` | | required | native `required` | ### Descriptions and errors Helper text and error text are wired into `aria-describedby` through the shared field wrapper. When an error is present, it becomes the active description and helper text is suppressed.