CheckBoxGroup

a group of checkboxes

Using Grommet for HPE?See CheckBoxGroup examples and guidance.

CheckBoxGroup 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 called for each option and passed the option, and an object indicating whether the option is checked. It should return a react element.

function

'option', 'checked' and 'indeterminate' can be passed as arguments that would then return a react element.

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

defaultValue

Initially selected option(s).

array

An array of numbers or strings.

[1, 2]

['option 1']

disabled

Disables all options.

boolean

true

false

labelKey

When the options array contains objects, this property indicates how to determine the label of each option. If a string is provided, it is used as the key to retrieve each option's label.

string

"label"

name

Required when used in the Context of Form and FormField.

string

"name"

onChange

Function that will be called when the user clicks on a CheckBox option.

function

The function will pass a React event object with the additional CheckBoxGroup properties of 'option' and 'value'.

({ value, option }) => {...}

options

The options to choose from.

array[string]

["Maui", "Kauai", "Oahu"]

array[object]

An array of objects of CheckBox props excluding the 'checked' property, use CheckBoxGroup 'value' prop instead of 'checked'.

[
  { label: 'Maui' },
  { label: 'Jerusalem' },
  { label: 'Wuhan' },
]

value

An array of the values for the checked options. If options is provided as an object, the value array will be the values that the valueKey maps to.

array


[
  number
  "string"
]

valueKey

When the options array contains objects, this property indicates how to determine the value of each option. If a string is provided, it is used as the key to retrieve each option's value.

string

"value"

React/DOM Properties

At its core, the CheckBoxGroup 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.