Design System

Visual Style

Components

Patterns

Guides

Resources

Checkbox Group

For wrapping checkboxes with a label and help text

Setting Selection

Select a setting from the menu below:

import { Checkbox, CheckboxGroup } from "@nulogy/components";

<CheckboxGroup
  name="settingSelection"
  labelText="Setting Selection"
  helpText="Select a setting from the menu below:"
>
  <Checkbox value="a" labelText="Option A" />
  <Checkbox value="b" labelText="Option B" />
  <Checkbox value="c" labelText="Option C" />
</CheckboxGroup>

Variations

With an error

Setting Selection

Select a setting from the menu below:

A selection must be selected

import { Checkbox, CheckboxGroup } from "@nulogy/components";

<CheckboxGroup
  name="settingSelection"
  labelText="Setting Selection"
  helpText="Select a setting from the menu below:"
  errorMessage="A selection must be selected"
>
  <Checkbox value="a" labelText="Option A" />
  <Checkbox value="b" labelText="Option B" />
  <Checkbox value="c" labelText="Option C" />
</CheckboxGroup>

Props

NameTypeDefaultDescription

name

String

Required

A unique name for this input that groups inputs together

defaultValue

String

null

A value to autoselect on pageload

errorMessage

String

null

Displays list of error messages and applies red style

errorList

Array of Strings

null

Displays list of error messages and applies red style

helpText

String

null

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

Required

Informs users what the corresponding input field is for.

required

Boolean

false

Makes the field require selection before the form will submit.

requirementText

String

null

(Optional) or (Required).

className

String

undefined

className passed to the group wrapper.

Related components

Resources