ComponentsNew
Lever Switch
A metal toggle lever on a dark plate with two lamps. The lever flips up and down and the matching lamp lights up.
Customize
onColor
offColor
Based on soft-pug-40 by csemszepp (MIT license) · Terms of use
More in Pro
View allProps
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| defaultChecked | boolean | true | Whether the lever starts on. |
| checked | boolean | — | Controlled state. Without it the lever keeps its own state. |
| onCheckedChange | (checked: boolean) => void | — | Called with the new state after every flip. |
| size | number | 12 | Scale in pixels per em. The plate is 6.8 by 12.8 em. |
| onColor | string | "#fafafa" | Glow of the top lamp when on. |
| offColor | string | "#737373" | Glow of the bottom lamp when off. |
| onLabel | string | "ON" | Caption above the top lamp. |
| offLabel | string | "OFF" | Caption below the bottom lamp. |
| disabled | boolean | false | Disable the lever. |
| label | string | "Power" | Accessible name of the lever. |
| className | string | — | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge