Components / Switch

Switch

A native binary control for settings that take effect immediately.

Enable project notifications

example.component.html

html

<label>
  <input aevkoSwitch type="checkbox" [(ngModel)]="notifications" />
  Enable notifications
</label>

Installation

npx aevko-ui@latest add switch --yes

Source ownership

Use the switch for immediate binary settings, choose a compact size when needed and theme the square track through semantic tokens.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Property or slot	Type	Default	Description
`size`	`'sm' \| 'md'`	`'md'`	Changes the track and thumb dimensions.
`invalid`	`boolean`	`false`	Writes aria-invalid and applies invalid styling.
`native attributes`	`HTMLInputElement`	`browser default`	Supports checked, disabled, value, Forms bindings and native events.

Accessibility contract

A native checkbox with role switch exposes checked state while preserving forms and keyboard behavior.

Use a persistent label that describes the setting, not the current on/off value, and avoid switches for deferred form submission.