Checkbox Group
Multi-choice checkbox list with the same static, dynamic, dependent, and nested option patterns as Multi-Select.
Overview
The Checkbox field renders a vertical stack of checkbox tiles—each maps to one option value. Respondents may select zero, one, or many boxes; the submission stores a string array identical in shape to Multi-Select (different presentation only).
Use optionConfigs for labeled values, optional nestedForm branches, isDynamic fetching, and dependent URLs—same semantics as Select/Multi-Select.
Warning: This control is not a lone yes/no toggle: there is no separate boolean-only schema here. Model single consent checks by offering one checkbox option or use a dedicated pattern from your integration layer.
Properties
Note: Keys mirror other selection fields; see Select for narrative detail on each dataSource knob.
| Property | Type | Default | Description |
|---|---|---|---|
| id | string | — | Unique field identifier. |
| type | string | "checkbox" | Discriminator for checkbox groups. |
| label | string | — | Human-readable label shown above the field or step heading. |
| required | boolean | false | When true, the form cannot submit without a value. |
| isHidden | boolean | false | Hides the field from respondents (may still store defaults). |
| isDisabled | boolean | false | Renders the field read-only. |
| instruction | string | undefined | Help text shown below the label (not the same as placeholder). |
| optionConfigs | OptionConfig[] | undefined | { label, value, nestedForm? } rows drive each checkbox (nested forms stack per checked option). |
| optionConfigs[].nestedForm | NestedForm | undefined | Recursive mini-forms rendered under selected tiles. |
| options | string[] | [] | Plain-label shorthand when optionConfigs absent. |
| isDynamic | boolean | false | Populate tiles from HTTP source. |
| dataSource.url | string | — | Endpoint URL with optional brace placeholders. |
| dataSource.method | "GET" | "POST" | GET | HTTP verb. |
| dataSource.path | string | "" | Dot-path to array within JSON response. |
| dataSource.valueField | string | — | Stored checkbox value property. |
| dataSource.labelField | string | — | Visible label property. |
| dataSource.headers | object | undefined | Extra headers. |
| dataSource.body | object | undefined | POST body template. |
| dataSource.dependsOn | string | undefined | Parent field id for cascading fetches. |
| dataSource.parentValuePath | string | undefined | Brace placeholder token replacement for dependent URLs. |
| dataSource.parentValueParam | string | undefined | POST body injection key for parent selection. |
Static options
{
"id": "f44bdd9f-7f90-4f1c-9f33-444444444444",
"type": "checkbox",
"label": "Dietary needs",
"required": false,
"options": ["Vegetarian", "Vegan"],
"optionConfigs": [
{ "label": "Vegetarian", "value": "vegetarian" },
{ "label": "Vegan", "value": "vegan" },
{ "label": "Gluten-free", "value": "gluten_free" }
]
}Dynamic & dependent
Mirror Multi-Select: enable isDynamic, configure dataSource, add dependsOn + parentValuePath when option tiles depend on another field's id.
Nested option forms
Checked rows that declare nestedForm expand indented sections beneath the group—multiple selections produce multiple stacked nested panels, identical behavior to Multi-Select nested rendering.
Use Cases by Pattern
Static checkbox groups
- Accessibility-friendly “select all that apply” lists with large tap targets
- Consent bundles where multiple acknowledgements collect distinct nested attestations
Dynamic / nested checkbox groups
- Operational task picklists synced nightly from ITSM APIs
- Compliance questionnaires requiring parallel detail captures per obligation checked