ComponentsProNew
Glossy Switch
A tactile switch with a heavy knob that slides over to reveal a lit window. Works as a real checkbox, keyboard included.
Customize
accentColor
Based on witty-fly-56 by csemszepp (MIT license) ยท Terms of use
Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| defaultChecked | boolean | true | Whether the switch starts on. |
| checked | boolean | โ | Controlled state. Without it the switch keeps its own state. |
| onCheckedChange | (checked: boolean) => void | โ | Called with the new state after every flip. |
| width | number | 160 | Width in pixels; the height is width / 2.5. |
| accentColor | string | "#f5f5f5" | Color of the lit window when on. |
| duration | number | 0.6 | Seconds for the knob to slide. |
| disabled | boolean | false | Disable the switch. |
| label | string | "Toggle" | Accessible name of the switch. |
| className | string | โ | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge