Switch sliding switch assembly

Effect demonstration

1. Basic use of components

<Switch
  checked={checked}
  onChange={checked => {
    setChecked(checked);
  }}
/>

2. Component disabled

<Switch
  checked={checked}
  disabled
  onChange={checked => {
    setChecked(checked);
  }}
/>

3. Custom background

<Switch
  checked={checked}
  activeBackground="#875467"
  onChange={checked => {
    setChecked(checked);
  }}
/>

4. Custom label

<Switch
  checked={checked3}
  showText
  onText="ON"
  offText="OFF"
  onChange={checked => {
    setChecked3(checked);
  }}
/>

API

Properties	Required	Description	Type	Default Value
checked	false	Whether it is currently selected	boolean	false
disabled	false	Whether it is currently disabled	boolean	false
onChange	false	Event handler function when state changes	(checked: boolean) => void
activeBackground	false	Background color when selected or not	string
showText	false	Whether to display text	boolean	false
onText	false	Text when the switch is on	string	on
offText	false	Text when the switch is off	string	off
width	false	width	number	50