Github

Switch

Switches toggle between two states, such as enabled and disabled.

Component variations

Basic Switch

Standard switch without label

With Label

Switch with descriptive label

States

Unchecked, Checked, and Disabled states

Usage Guidelines

Import

Import the switch component in your module or component:

import-switch.ts

Copy code

Basic Implementation

Here is a basic example using ngModel for two-way binding:

switch-example.ts

Copy code

Listening to Change Events

Handle state changes by listening to the (change) event:

switch-events.html

Copy code

switch-events.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
label
string
-
No
Optional label text displayed above the switch
checked
boolean
false
No
Whether the switch is currently active/checked
disabled
boolean
false
No
Whether the switch is disabled and cannot be toggled

Outputs

Event
Type
Description
change
EventEmitter<boolean>
Emitted when the switch is toggled, with the new state

Best Practices

When to Use

  • Use Switch when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Switch when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Always provide a clear label that describes what the switch controls
  • Use switches for binary on/off choices, not for multiple options
  • Use reactive forms for better state management in complex forms
  • Disable switches when the option is not applicable based on other form values
  • Consider the impact of toggling and provide feedback (success messages, warnings)
  • Group related switches together visually
  • Test keyboard accessibility (Space to toggle, Tab navigation)
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Interact with the switch component in this section

example.html

Copy code