Components

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

<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

Toggle

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

Disable

Appearance

Properties

Basic usage