Back to componentszyra-toggle
Toggle
On/off switch control for settings, preferences, and feature flags with full keyboard and accessibility support.
Component preview
Explore the available states and the real library behavior for this component.
zyra-toggle Playground
Control every input live and see the result instantly
Controls
size
label position
label
boolean inputs
checked — false
Preview
Generated Code
<zyra-toggle
label="Enable notifications"
/>Sizes
sm
md
lg
States
off
on
disabled off
disabled on
Real World Examples
Notifications
Email alertsGet notified via email
Push notificationsReceive browser push alerts
Weekly digestSummary every Monday
Preferences
Dark modeUse dark theme across app
Compact viewReduce spacing in lists
Auto-saveSave changes automatically
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component, signal } from '@angular/core';
import { ZyraToggle } from 'zyra-ng-ui';
@Component({
selector: 'app-demo',
standalone: true,
imports: [ZyraToggle],
template: `
<zyra-toggle
[(checked)]="enabled"
label="Enable notifications"
/>
`,
})
export class DemoComponent {
enabled = signal(false);
}Variants
All the visual modes and states available for this component.
smSmall switch for dense settings panels
mdDefault size for most form layouts
lgLarge switch for prominent feature toggles
API
All inputs and configuration options for zyra-toggle.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Current on/off state; two-way bindable via [(checked)] |
label | string | - | Visible text label associated with the switch |
labelPosition | 'left' | 'right' | 'right' | Side the label renders relative to the pill |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the pill |
disabled | boolean | false | Disables interaction |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="switch" and aria-checked to communicate on/off state
- label is linked via aria-labelledby - always provide a label for screen readers
- Keyboard-operable via Space to toggle and Tab to focus