Docs
Components
Switch

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 to false.
  • onChange (required): Function called when the switch state changes.
  • activeColor (optional): Color when the switch is active (white, black, primary, secondary). Defaults to primary.
  • inactiveColor (optional): Color when the switch is inactive (white, black, primary, secondary). Defaults to secondary.

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.
  • initialChecked

    • Type: boolean
    • Default: false
    • Description: Initial checked state of the switch.
  • onChange

    • Type: (checked: boolean) => void
    • Description: Function called when the switch state changes.
  • activeColor

    • Type: "white" | "black" | "primary" | "secondary"
    • Default: "primary"
    • Description: Color when the switch is active.
  • inactiveColor

    • Type: "white" | "black" | "primary" | "secondary"
    • Default: "secondary"
    • Description: Color when the switch is inactive.