For wrapping checkboxes with a label and help text
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>
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>
Name | Type | Default | Description |
---|---|---|---|
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. |
disabled | Boolean | false | Marks the entire group as disabled and unable to be toggled. |
requirementText | String | null | (Optional) or (Required). |
className | String | undefined | className passed to the group wrapper. |