RadioButtonGroup

a group of radio buttons

Using Grommet for HPE?See RadioButtonGroup examples and guidance.

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.

function

The function will be passed an object indicating whether the button is checked. It should return a react element.

(option, { checked, hover }) => <Box ...>{...}</Box>

disabled

Disables all options.

boolean

true

false

name

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

string

"name"

onChange

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

function

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

options

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

array[string]

["option1", "option2"]

array[number]

[1, 2]

array[boolean]

[true, false]

array[object]


[
  {
    disabled: boolean,
    id: "string",
    label:  "string" | element,
    value: "string" | number | boolean
  }
]

value

Currently selected option value.

string

"option1"

number

boolean

true

false

object

{
  disabled: boolean,
  id: "string",
  label:  "string" | element,
  value: "string" | number | boolean
}

React/DOM Properties

At its core, the RadioButtonGroup component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

radioButtonGroup.container

Any valid Box props for the RadioButtonGroup container.

object

{}