Switch Icon
Toggle switch with animated checkmark icon and ring indicator when active.
1import { SwitchIcon } from "@/zeroui/components/switches";23export default function Example() {Colors
1<SwitchIcon color="blue" defaultChecked />2<SwitchIcon color="green" defaultChecked />3<SwitchIcon color="violet" defaultChecked />Sizes
1<SwitchIcon size="sm" defaultChecked />2<SwitchIcon size="md" defaultChecked />3<SwitchIcon size="lg" defaultChecked />Installation
npx zeroui@latest add switch-iconProps
| name | type | default | description |
|---|---|---|---|
| checked | boolean | undefined | - |
| defaultChecked | boolean | false | - |
| onChange | (checked: boolean) => void | undefined | - |
| disabled | boolean | false | - |
| size | "sm" | "md" | "lg" | "md" | - |
| color | "blue" | "green" | "violet" | "red" | "orange" | "blue" | - |