---
name: ToggleField
menu: Components
---

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

# ToggleField

### Try it out

export const code = `() => {
  const [state, setState] = useState(true)
  return (
    <ToggleField
      name="enabled"
      label={state ? 'On' : 'Off'}
      checked={state}
      onChange={(e) => setState(e.target.checked)}
    />
  )
}`

<LiveProvider code={code} scope={{ ToggleField, useState }}>
  <LiveEditor style={livePreviewStyle}/>
  <LiveError />
  <LivePreview />
</LiveProvider>
<Wrapper />

The ToggleField is a Field component to be used in a Form, is composed of a [`Toggle`](../Toggle.mdx) and a `Label` and requires a `name` and `label`.

## Best practices

Any provided `id` will be automatically added to the label and toggle for accessibility; if an id is not provided, one will be created.

## Basic usage

```jsx
import React, { useState, useCallback } from 'react'
import { Button, ToggleField } from '@repay/cactus-web'

export default function Form() {
  const [values, setValues] = useState({ enabled: false })
  const handleChange = useCallback(
    (e) => {
      setValues(state => ({ ...state, [e.target.name]: e.target.checked }))
    },
    [setValues]
  )
  const onSubmit = useCallback(
    event => {
      event.preventDefault()
      const data = { ...values }
      // send data to api
    },
    [values]
  )

  return (
    <form onSubmit={onSubmit}>
      <ToggleField
        name="enabled"
        label="Is Enabled"
        onChange={handleChange}
        checked={values.enabled}
      />
      <Button type="submit" variant="action">
        Submit
      </Button>
    </form>
  )
}
```

View and edit the available props in the published [ToggleField stories](https://repaygithub.github.io/cactus/stories/cactus-web/?path=/story/togglefield--basic-usage) and review available props below.

## Properties

<PropsTable of={ToggleField} />