---
name: RadioButtonField
menu: Components
---

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

# RadioButtonField

### Try it out

export const code = `<form>
  <RadioButtonField name="radiobuttonfield" label="option a" value="option_a" />
  <RadioButtonField name="radiobuttonfield" label="option b" value="option_b" />
</form>`

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

The `RadioButton` is a combination of `RadioButton` and `Label`, along with some accessibility features that are taken care of for you.

## Best practices

- Use meaningful labels to ensure accessibility.
- ID is not required because if you do not provide one, a unique one will be generated for you.

## Basic usage

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

export default function Form() {
  const [values, setValues] = useState({ radiobuttonfield: 'option_a' })
  const handleChange = useCallback(
    (e) => {
      if (e.target.checked) {
        setValues(state => ({ ...state, [e.target.name]: e.target.value }))
      }
    },
    [setValues]
  )
  const onSubmit = useCallback(
    event => {
      event.preventDefault()
      const data = { ...values }
      // send data to api
    },
    [values]
  )
  return (
    <form onSubmit={onSubmit}>
      <RadioButtonField
        name="radiobuttonfield"
        label="option a"
        value="option_a"
        onChange={handleChange}
        checked={values.radiobuttonfield === 'option_a'}
      />
      <RadioButtonField
        name="radiobuttonfield"
        label="option b"
        value="option_b"
        onChange={handleChange}
        checked={values.radiobuttonfield === 'option_b'}
      />
      <Button type="submit" variant="action">
        Submit
      </Button>
    </form>
  )
}
```

## Properties

<PropsTable of={RadioButtonField} />