Switch

React switch component.

Usage

Example

Script


  const modes = [
        {},
        { size: 'sm'},
        { size: 'lg'},
        { variant: '3d' },
        { shape: 'pill' },
        { variant: 'opposite' },
        { variant: 'outline', shape:'pill' }
      ];
  const colors = ['primary', 'success', 'warning', 'danger', 'info', 'dark', 'light', 'secondary'];

  return (
    <>
      {modes.map((mode, index)=>{
        return (
          <div className="d-flex justify-content-between my-4" key={index}>
            Passed props: {JSON.stringify(mode)}
            {
              colors.map((color, key)=>{
                return (
                  <CSwitch
                    key={key}
                    color={color}
                    checked
                    value={color}
                    {...mode}
                  />
                )
              })
            }
          </div>
        )
      })}
    </>
  )

# Features

Many styles and sizes
Checkbox or radio input mode

# Switch API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
size		(lg \| sm)
size of the switch, valid values: 'sm','lg'
shape		(pill \| square)
shape of the switch, valid values: 'square','pill'
variant		(() \| opposite \| outline)
variant of the component, valid values: 'outline', 'opposite', '3d'
color		string
background color of the component
labelOn		string
optionally set text labels on switch (you can pass one or both labels)
labelOff		string
optionally set text labels on switch (you can pass one or both labels)