Switches
Material 3 Expressive Switch components for toggling the state of a single setting.
Basic Usage
Switches allow users to toggle between on and off states. They follow Material Design 3 specifications with smooth animations and accessibility support.
Default Switch
The switch starts in the off state by default.
<m3-switch></m3-switch>
<m3-switch checked></m3-switch>States
Switches can be in different states: enabled, disabled, checked, and unchecked.
Disabled State
Disabled switches cannot be interacted with and have reduced opacity.
<m3-switch disabled></m3-switch>
<m3-switch checked disabled></m3-switch>Interactive Examples
Switches emit events when their state changes, allowing you to react to user interactions.
Settings Panel
Example of switches used in a settings interface:
Enable Notifications
Receive push notifications for important updates
Dark Mode
Switch to dark theme for better viewing in low light
Auto-save
Automatically save your work as you type
Location Services
Allow apps to access your location
<m3-switch
[checked]="notificationsEnabled"
(change)="onSwitchChange($event, 'notifications')">
</m3-switch>Accessibility
The switch component follows Material Design 3 accessibility guidelines:
ARIA Support
- ✓ Uses proper ARIA attributes (role="switch", aria-checked, aria-disabled)
- ✓ Supports keyboard navigation (Space and Enter keys)
- ✓ Provides focus indicators
- ✓ Supports screen readers with aria-label and aria-labelledby
<m3-switch aria-label="Enable Wi-Fi"></m3-switch>
<m3-switch aria-labelledby="wifi-label"></m3-switch>Properties & Events
Properties
| Property | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the switch is checked (on) |
disabled | boolean | false | Disables the switch |
name | string | null | Name attribute for form submission |
value | string | null | Value attribute for form submission |
aria-label | string | null | ARIA label for accessibility |
Events
| Event | Detail | Description |
|---|---|---|
change | Read checked from the switch element | Fired when the switch state changes |