---
name: RadioButton
menu: Components
---

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

# RadioButton

### Try it out

export const code = `<RadioButton id="rb-1" name="rb-group" />`

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

## Best practices

- Each `RadioButton` must have a unique `id`.
- The `name` prop should be used to create a group of radio buttons by providing them with the same name.
- When pairing a `RadioButton` with a label, you should connect your label to the radio button using the `htmlFor` prop.
  This is paramount for making a checkbox accessible.
  - Example:
  ```jsx
  <RadioButton id="rb" name="rb-group"/>
  <Label htmlFor="rb">Not Today</Label>
  ```

## Basic usage

```jsx
import { RadioButton } from '@repay/cactus-web
...
// Basic usage
<RadioButton id="rb-1" name="rb-group" />

// Disabled
<RadioButton id="rb-2" name="rb-group" disabled={true}/>
```

## Properties

<PropsTable of={RadioButton} />