CheckboxGroup

For wrapping a group of checkboxes with a label and help text.

children

<Checkbox value="a" labelText="Option A" />
<Checkbox value="b" labelText="Option B" />
<Checkbox value="c" labelText="Option C" />

<Checkbox value="a" labelText="Option A" />
<Checkbox value="b" labelText="Option B" />
<Checkbox value="c" labelText="Option C" />

defaultValue

errorMessage

errorList

helpText

labelText

required

disabled

requirementText

name

className

import * as React from "react";
import {
  CheckboxGroup,
  Checkbox
} from "@nulogy/components";

export default () => {
  return (
    <CheckboxGroup
      defaultValue="a"
      helpText="Select a setting from the menu below:"
      labelText="Setting Selection"
      required={false}
      disabled={false}
      requirementText="false"
      name="settingSelection"
    >
      <Checkbox value="a" labelText="Option A" />
      <Checkbox value="b" labelText="Option B" />
      <Checkbox value="c" labelText="Option C" />
    </CheckboxGroup>
  );
}

import * as React from "react";
import {
  CheckboxGroup,
  Checkbox
} from "@nulogy/components";

export default () => {
  return (
    <CheckboxGroup
      defaultValue="a"
      helpText="Select a setting from the menu below:"
      labelText="Setting Selection"
      required={false}
      disabled={false}
      requirementText="false"
      name="settingSelection"
    >
      <Checkbox value="a" labelText="Option A" />
      <Checkbox value="b" labelText="Option B" />
      <Checkbox value="c" labelText="Option C" />
    </CheckboxGroup>
  );
}

Props

Name	Type	Default	Description
children	react node		inner checkboxes
defaultValue	string		A value to autoselect on pageload
errorMessage	string		Displays an error message and applies red style
errorList	array		Displays list of error messages and applies red style
helpText	string		Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.
labelText	string		Informs users what the corresponding input field is for.
required	boolean	false	Makes the field require selection before the form will submit.
disabled	boolean	false	Marks the entire group as disabled and unable to be toggled.
requirementText	string	null	(Optional) or (Required).
name	string		A unique name for this input that groups inputs together
className	string		className passed to the group wrapper.

Related Components

Checkbox