UNPKG

@dotconnor/grommet

Version:

focus on the essential experience

102 lines (70 loc) 1.93 kB
## CheckBoxGroup A group of CheckBoxes. [![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Input-CheckBoxGroup&full=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/checkboxgroup&module=%2Fsrc%2FCheckBoxGroup.js) ## Usage ```javascript import { CheckBoxGroup } from 'grommet'; <CheckBoxGroup /> ``` ## Properties **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. ``` [ number string ] ``` **disabled** Disables all options. ``` boolean ``` **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 ``` **name** Required when used in the Context of Form and FormField. ``` string ``` **onChange** Function that will be called when the user clicks on a CheckBox option. It will pass a React event object with the additional CheckBoxGroup properties of 'option' and 'value'. ``` function ``` **options** Required. Options can be either a string or an object of CheckBox props excluding the 'checked' property, use CheckBoxGroup 'value' prop instead of 'checked'. ``` [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 ``` ## Intrinsic element ``` div ``` ## Theme **checkBoxGroup.container** Any valid Box props for the CheckBoxGroup container. Expects `object`. Defaults to ``` undefined ```