This component implements the Material Design 3 toggle with proper accessibility support. It provides a two-state button that can be toggled on and off. Features: - Default and outline variants - Multiple size options (sm, default, lg) - Various border radius options - Proper ARIA attributes for accessibility - Keyboard navigation support - Disabled state support
Qwik-UI Toggle
Interactive Demo
Basic Toggle
Toggle Sizes
Border Radius Variants
Icon Toggle
Combined Example
// Default toggle
<Toggle>Default Toggle</Toggle>
// Outline variant with small size
<Toggle look="outline" size="sm">
Small Outline Toggle
</Toggle>
// Large toggle with custom radius
<Toggle size="lg" rounded="xl">
Large Toggle
</Toggle>
// Disabled toggle
<Toggle disabled>
Disabled Toggle
</Toggle>