Switch

Switches are an input type to alternate between states for various purposes.

Usually they are used to change between two states (true and false) for different contexts, such as changing the theme of a website to use dark or light mode or activate and deactivate options.

Basic implementation

To start using the switch component, you need to set a React state to change the checked attribute from the switch.

    
       
 import { useState } from "react"; 
 import { Button } from "cloth-ui"; 
 
 export const BasicComponent = () => { 

  const [checked, setChecked] = useState(false); 
 

  return ( 

    <Switch 

      id="mySwitch" 

      checked={checked} 

      onChange={() => setChecked((e)
=> !e)} 

    /> 

  ); 
 }; 
 
    
  

Disabled Switch

The switch can be disabled, using the disabled attribute.

Note that when the switch is disabled, it will maintain its last state. If it was unchecked, it will remaing unchecked and the same the other way around, and it cannot be changed when disabled.

    
       
 import { useState } from "react"; 
 import { Button } from "cloth-ui"; 
 
 export const BasicComponent = () => { 

  const [checked, setChecked] = useState(false); 
 

  return ( 

    <Switch 

      id="mySwitch" 

      checked={checked} 

      disabled 

      onChange={() => setChecked((e)
=> !e)} 

    /> 

  ); 
 };