Switch Component

The Switch component creates an interactive on/off control perfect for settings, preferences, and feature toggles. It’s accessible, customizable, and easy to implement in your AstroJS project.

Key Features

• Multiple Variants: Support for default, success, and destructive states

• Size Options: Three size variants for different contexts

• Accessibility: Full ARIA support and keyboard navigation

Basic Usage

Add a simple switch by importing and using the component:

1
<Switch
2
    label="Notifications"
3
    checked={true}
4
/>

Size Variations

The switch comes in three sizes to match your design needs:

1
<Switch size="sm" label="Compact Switch" />
2
<Switch label="Standard Switch" />
3
<Switch size="lg" label="Large Switch" />

Color Variants

The switch supports different color variants to indicate various states or actions:

1
<Switch variant="default" label="Default Switch" />
2
<Switch variant="success" label="Success Switch" />
3
<Switch variant="destructive" label="Destructive Switch" />

Switch Component Props API

Custom Event Listeners

Listen for switch state changes:

Waiting for events to be emitted… (Click on the switch to see the events)

1
document.querySelector('switch-wrapper').addEventListener(SwitchEventNames.Change, (event) => {
2
  const isChecked = event.detail.checked;
3
  // Handle state change
4
});