## RadioButton
A radio button control.
RadioButton should typically not be used directly.
Instead, use RadioButtonGroup.
[](https://storybook.grommet.io/?selectedKind=RadioButton&full=0&addons=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=radiobutton&module=%2Fsrc%2FRadioButton.js)
## Usage
```javascript
import { RadioButton } from 'grommet';
```
## Properties
**checked**
Same as React
```
boolean
```
**children**
Function that will be called to render the visual representation.
It will be passed an object indicating whether the button is checked. It
should return a react element.
For example:
`children={({ checked }) => {...}}`
```
function
```
**disabled**
Same as React . Also adds a hidden input element
with the same name so form submissions work.
```
boolean
```
**id**
The DOM id attribute value to use for the underlying element.
```
string
```
**label**
Label text to place next to the control.
```
node
```
**name**
Required. The DOM name attribute value to use for the underlying
element.
```
string
```
**onChange**
Function that will be called when the user clicks the radio button. It
will be passed a React event object. The current state can be accessed
via event.target.checked. Same as React .
```
function
```
## Intrinsic element
```
input
```
## Theme
**radioButton.border.color**
The color of the border of the Radio Button. Expects `string | { dark: string, light: string }`.
Defaults to
```
{dark: 'rgba(255, 255, 255, 0.5), light: 'rgba(0, 0, 0, 0.15)}
```
**radioButton.border.width**
The width size of the border of the RadioButton. Expects `string`.
Defaults to
```
2px
```
**radioButton.check.color**
The color of the checked icon in the RadioButton. Expects `string | { dark: string, light: string }`.
Defaults to
```
undefined
```
**radioButton.check.extend**
Any additional style for the checked RadioButton. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**radioButton.check.radius**
The border-radius of the RadioButton. Expects `string`.
Defaults to
```
100%
```
**radioButton.color**
The color of the border surrounding the checked
icon in RadioButton checked state. Expects `string | { dark: string, light: string }`.
Defaults to
```
undefined
```
**radioButton.extend**
Any additional style for the RadioButton. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**radioButton.gap**
The gap between the label and the RadioButton itself. Expects `string`.
Defaults to
```
small
```
**radioButton.size**
The size of the RadioButton. Expects `string`.
Defaults to
```
24px
```
**radioButton.hover.border.color**
The color of the RadioButton border when hovered over. Expects `string | { dark: string, light: string }`.
Defaults to
```
{dark: white, light: black}
```
**radioButton.icon.extend**
Any additional style for the RadioButton icon. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**radioButton.icon.size**
The size of the icon in the RadioButton. Expects `string`.
Defaults to
```
undefined
```