---
name: Toggle
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import Toggle from './Toggle'
import cactusTheme from '@repay/cactus-theme'
import React from 'react'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# Toggle

The `Toggle` component can be useful for boolean fields. Props & behavior are basically the same as a checkbox.

### Try it out

export const code = `<Toggle />`

<LiveProvider code={code} scope={{ Toggle }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

- If you are associating a label to the toggle manually, it's important to connect the label to the toggle using the
  `htmlFor` prop. This will ensure that accessibility tools are able to determine what the toggle is for. For that reason,
  it's also important to use descriptive labels.
  - Example:
  ```jsx
  <Toggle id="toggle" value={false} />
  <Label htmlFor="toggle">The Great War</Label>
  ```

## Basic usage

```jsx
import { Toggle } from '@repay/cactus-web'
...
// Basic usage
<Toggle defaultChecked={false} />

// Disabled
<Toggle disabled />
```

## Properties

<PropsTable of={Toggle} />