Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Switch

Switches toggle the state of a single setting on or off.

code

Expend code

<Switch />

<Switch />

#Label

code

Expend code

 
    <div className="flex items-center ">
      <Switch id="darkmode" />
      <Label htmlFor="darkmode" className="cursor-pointer ml-2">
        darkmode
      </Label>
    </div>

 
    <div className="flex items-center ">
      <Switch id="darkmode" />
      <Label htmlFor="darkmode" className="cursor-pointer ml-2">
        darkmode
      </Label>
    </div>

#Checked & disable

code

Expend code


    <div className="flex items-center mr-2 ">
      <Switch id="checked" checked={true} />
      <Label htmlFor="checked" className="cursor-pointer ml-2 ">
        checked
      </Label>
    
      <Switch id="disabled" checked={false} disabled />
      <Label htmlFor="disabled" className="cursor-pointer ml-2 opacity-50">
        disabled
      </Label>
    </div>


    <div className="flex items-center mr-2 ">
      <Switch id="checked" checked={true} />
      <Label htmlFor="checked" className="cursor-pointer ml-2 ">
        checked
      </Label>
    
      <Switch id="disabled" checked={false} disabled />
      <Label htmlFor="disabled" className="cursor-pointer ml-2 opacity-50">
        disabled
      </Label>
    </div>

# color

code

Expend code

 
    <div className="flex items-center ">
      <Switch id="color" checked={true} className="bg-blue-500" />
      <Label htmlFor="color" className="cursor-pointer ml-2 ">
        color
      </Label>
    </div>

 
    <div className="flex items-center ">
      <Switch id="color" checked={true} className="bg-blue-500" />
      <Label htmlFor="color" className="cursor-pointer ml-2 ">
        color
      </Label>
    </div>

Switch

the properties of a switch component that allow the user to turn a single setting on or off.

Prop	Type	Default	Description
className	string	-	CSS class for additional styling.
id	string	-	A unique identifier to associate a switch with a label.
checked	boolean	false	Controls whether the switch is checked.
defaultChecked	boolean	false	Sets the initial check state of the switch.
disabled	boolean	false	Sets whether the switch is disabled, preventing user interaction.