Switch Component
A powerful, customizable switch component with icons, animations, and advanced features.
Basic Switch
Simple switches with different sizes and variants.
Sizes
Variants
Icon Switches
Switches with custom icons for better visual communication.
Thumb Icons
Track Icons
Advanced Features
Loading states, animations, and special effects.
Special States
Label Positions
Settings Panel Example
A comprehensive settings panel using various switch configurations.
Appearance
Privacy & Security
Connectivity
API Reference
Complete list of props and their descriptions.
Switch Props
| Prop | Description | Type | Default |
|---|---|---|---|
| size | Size of the switch | "sm" | "md" | "lg" | "xl" | "md" |
| variant | Visual style variant | "default" | "success" | "warning" | "danger" | "info" | "gradient" | "default" |
| label | Label text for the switch | string | - |
| description | Description text below the label | string | - |
| loading | Show loading spinner in thumb | boolean | false |
| glowing | Add glowing effect when checked | boolean | false |
| animate | Enable smooth animations | boolean | true |
| thumbIcon | Icon to display in the thumb | ReactNode | - |
| checkedThumbIcon | Icon in thumb when checked | ReactNode | - |
| uncheckedThumbIcon | Icon in thumb when unchecked | ReactNode | - |
| checkedIcon | Icon in track when checked | ReactNode | - |
| uncheckedIcon | Icon in track when unchecked | ReactNode | - |
| labelPosition | Position of the label relative to switch | "left" | "right" | "top" | "bottom" | "right" |
| showIcons | Whether to show track icons | boolean | true |
| checked | Controlled checked state | boolean | - |
| defaultChecked | Default checked state | boolean | false |
| onCheckedChange | Callback when checked state changes | (checked: boolean) => void | - |