CheckboxGroup

A group of <Checkbox> buttons. The <Checkbox> buttons may either be direct children or descendants of the checkbox group.

Note: Setting value will override defaultValue as it puts the group of checkboxes into a controlled state. value will not override checkboxes that have checked set, as CheckboxGroup will take control of uncontrolled Checkbox components and can't override controlled ones. value will however override defaultChecked on Checkbox.

The onChange event handler for CheckboxGroup will fire after any onChange event handler set on individual Checkbox components. However, it is highly recommended to only set one event handler for the whole group in a controlled CheckboxGroup.

Checkbox components must have a value set on them in order to be controlled by CheckboxGroup.

Usage

import { CheckboxGroup } from 'nr1';

Examples

Basic

<CheckboxGroup label="My checkbox group">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

With label and info

<CheckboxGroup label="My checkbox group" info="Info value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

With inline label

<CheckboxGroup label="My checkbox group" labelInline>
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

With description

<CheckboxGroup label="My checkbox group" description="Description value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

With invalid message

<CheckboxGroup label="My checkbox group" invalid="Invalid message value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>;

With default values

<CheckboxGroup label="My checkbox group" defaultValue={['1', '2']}>
  <Checkbox label="Checkbox 1" value="1" />
  <Checkbox label="Checkbox 2" value="2" />
  <Checkbox label="Checkbox 3" value="3" />
</CheckboxGroup>;

Controlled component

class MyNerdlet extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      values: ['2'],
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(event, values) {
    this.setState({ values });
  }

  render() {
    return (
      <CheckboxGroup value={this.state.values} onChange={this.onChange}>
        <Checkbox label="Checkbox 1" value="1" />
        <Checkbox label="Checkbox 2" value="2" />
        <Checkbox label="Checkbox 3" value="3" />
      </CheckboxGroup>
    );
  }
}

Props

children

node

Content of the CheckboxGroup.

className

string

Appends class names to the component.

defaultValue

string[]

Default values of the checkbox group. The <Checkbox> components with matching values will be selected.Useful when you don't want to use a controlled component.

description

string

Message with instructions on how to fill the form field.

info

string

Additional information can be displayed in an info tooltip next to the Label.

invalid

boolean|string

When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a boolean field or a string. When it is a string, as well as the invalid state being shown, the text will be shown below.

label

string

Text to display as label.

labelInline

boolean

Display the label inline the form control.Use only when the component is not inside a Form. In that case set layoutType to Form.LAYOUT_TYPE.SPLIT in the Form component.

onChange

function

Callback which is fired when the checkbox group value changes (a <Checkbox> in the group is selected). function (

event: React.ChangeEvent, Event source of the callback.

value: string[] The values of the selected checkboxes.

)

required

boolean

If true, denotes the form field as required.

style

object

Inline style for custom styling.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

value

string[]

Values of the checkbox group. The <Checkbox> components with matching values will be selected.If defined, it turns the component into a controlled component.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With label and info

With inline label

With description

With invalid message

With default values

Controlled component

Props

node

string

string[]

string

string

boolean|string

string

boolean

function

boolean

object

string

string[]

Usage