Switch Component

A customizable toggle switch component with support for various sizes, colors, and label positions.

Overview

The Switch component provides:

• Toggle switch functionality with smooth animations
• Support for different sizes and color schemes
• Flexible label positioning
• Accessible design with proper ARIA attributes
• Customizable appearance through CSS variables

When to Use

Use the Switch component when you need to:

• Toggle features or settings on/off
• Create a modern, animated toggle interface
• Implement boolean state controls
• Provide a consistent toggle experience across your application

Key Features

• Multiple Sizes: Choose from xs, sm, md, lg, and xl sizes
• Variants: Apply library-provided variants (such as default and success) via the variant prop
• Label Positioning: Place labels on either the left or right side
• Custom Slots: Use slots to customize label content
• Disabled & Readonly States: Support for disabled and readonly modes
• Smooth Animations: Smooth transitions for state changes
• Responsive Design: Adapts to different screen sizes and contexts
• Inset Style: Support for inset style with different visual appearance
• Dot Labels: Display custom text labels inside the switch dot (e.g., "On"/"Off")

API Reference →

View Code →