RadioButtonGroup

a group of radio buttons

one

two

RadioButtonGroup is a Box with the following properties preset. You can customize it using the properties available in Box.

gap
"small"

Props

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={(option, { checked }) => <Box ...>{...}</Box>}

(option, { checked, hover }) => {...}

disabled

Disables all options.

truefalse

name

The DOM name attribute value to use for the underlying <input/> elements.

"string"

onChange

Function that will be called when the user clicks on one of the radio buttons. It will be passed a React event object.

({ target: { value } }) => {...}

options

Options can be either a string, boolean, number or an object. Each option is rendered as a single RadioButton.

["string"]

[true, false]

["number"]

[
  {
    "disabled": false,
    "id": "ONE",
    "name": "one",
    "value": "1",
    "label": "one"
  }
]

value

Currently selected option value.

"string"numbertruefalse"object"

Theme

radioButtonGroup.container

Any valid Box props for the RadioButtonGroup container.

object