React Toggle
Edit page
Code of conduct
Components
Toggle
Basic usage Properties
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>

## Properties

className
String | undefined
name
String | undefined
value
String | undefined
checked
Boolean | undefined
false
controlled
Boolean | undefined
false
disabled
Boolean | undefined
false
onToggle
((e: changeevent<element>) => void) | undefined
onRight
((e: changeevent<element>) => void) | undefined
onLeft
((e: changeevent<element>) => void) | undefined
width
String | undefined
height
String | undefined
borderWidth
String | undefined
borderColor
String | undefined
leftBorderColor
String | undefined
rightBorderColor
String | undefined
backgroundColor
String | undefined
leftBackgroundColor
String | undefined
rightBackgroundColor
String | undefined
backgroundColorDisabled
String | undefined
radius
String | undefined
radiusBackground
String | undefined
knobRadius
String | undefined
knobWidth
String | undefined
knobHeight
String | undefined
knobGap
String | undefined
knobColor
String | undefined
leftKnobColor
String | undefined
rightKnobColor
String | undefined
ref
((instance: unknown) => void) | refobject<unknown> | null | undefined
key
String | number | undefined