React Toggle
Edit page
Code of conduct
Components
Toggle
Basic usage Props
Get Started Theming Upgrade Guide

# Toggle

The Toggle component is an useful replacement to the standar input checkbox component. Anyway, remember that the toggle component is an extension of the input checkbox. So, you can use it inside a form as well. In fact, remember to use the props
`name` when you're using multiple toggle component in your view.

##
Basic usage

You can wrap the Toggle component with `label`

Left label
<label htmlFor="toggle-1"> Left label <Toggle name="toggle-1" /> </label>

    <label htmlFor="toggle-1">  Left label  <Toggle name="toggle-1" /></label>

Right label
<label htmlFor="toggle-2"> <Toggle name="toggle-2" /> Right label </label>

    <label htmlFor="toggle-2">  <Toggle name="toggle-2" />  Right label</label>

Or set any `label` outside

Left label outside
<label htmlFor="toggle-1a">Left label outside</label> <Toggle name="toggle-1a" />

    <label htmlFor="toggle-1a">Left label outside</label><Toggle name="toggle-1a" />

Right label outside
<Toggle name="toggle-2a" /> <label htmlFor="toggle-2a">Right label outside</label>

    <Toggle name="toggle-2a" /><label htmlFor="toggle-2a">Right label outside</label>

### Disable

Disabled
<label htmlFor="toggle-3"> Disabled <Toggle name="toggle-3" disabled /> </label>

    <label htmlFor="toggle-3">  Disabled  <Toggle name="toggle-3" disabled /></label>

### Appearance

Appearance
<label htmlFor="toggle-4"> <Toggle leftBackgroundColor="tomato" rightBackgroundColor="green" borderColor="tomato" knobColor="white" name="toggle-4" onToggle={e => console.log('onToggle', e.target.checked)} /> Appearance </label>

    <label htmlFor="toggle-4">  <Toggle    leftBackgroundColor="tomato"    rightBackgroundColor="green"    borderColor="tomato"    knobColor="white"    name="toggle-4"    onToggle={e => console.log('onToggle', e.target.checked)}  />  Appearance</label>

## Props