Switch
This component renders a toggle switch.
Import
import {Switch}from "cui-react";
Example
Render a basic switch:
Code:
<Switch label="Enable Notifications" onChange={(checked) => console.log(checked)} />
Visual:
Customizing
You can customize the Switch
component using the following props:
label
(required): Label displayed next to the switch.initialChecked
(optional): Initial checked state of the switch. Defaults tofalse
.onChange
(required): Function called when the switch state changes.activeColor
(optional): Color when the switch is active (white
,black
,primary
,secondary
). Defaults toprimary
.inactiveColor
(optional): Color when the switch is inactive (white
,black
,primary
,secondary
). Defaults tosecondary
.
Example: Custom Colors
This example renders a switch for toggling dark mode with custom active and inactive colors.
Props
-
label
- Type:
string
- Description: Label displayed next to the switch.
- Type:
-
initialChecked
- Type:
boolean
- Default:
false
- Description: Initial checked state of the switch.
- Type:
-
onChange
- Type:
(checked: boolean) => void
- Description: Function called when the switch state changes.
- Type:
-
activeColor
- Type:
"white" | "black" | "primary" | "secondary"
- Default:
"primary"
- Description: Color when the switch is active.
- Type:
-
inactiveColor
- Type:
"white" | "black" | "primary" | "secondary"
- Default:
"secondary"
- Description: Color when the switch is inactive.
- Type: