react-toggle-component/srcdocs/components/Toggle/toggle.mdx

A React UI Component to display an awesome Toggle Button control

---
name: Toggle
route: /components/toggle
menu: Components
---

import { Playground, Props } from 'docz'
import Toggle, {ToggleProps} from '../../../src/components/Toggle'


# 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`

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

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

Or set any `label` outside

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

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

### Disable

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

### Appearance

<Playground>
  <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>
</Playground>

## Properties

<Props of={ToggleProps} />