Version: latest

Works everywhere

CheckboxGroup works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/checkbox-group) — the library detects the runtime automatically.

CheckboxGroup

CheckboxGroup manages a set of related Checkbox inputs as a multi-select group. Handles selection state, accessible grouping, and error display for the group as a whole.

Live demo →

Overview

import { CheckboxGroup } from "@prokodo/ui/checkbox-group"
;<CheckboxGroup
  label="Interests"
  name="interests"
  options={[
    { label: "Design", value: "design" },
    { label: "Development", value: "dev" },
    { label: "Marketing", value: "marketing" },
  ]}
  value={selected}
  onChange={setSelected}
/>

Live PreviewOpen in Storybook ↗

Import

import { CheckboxGroup } from "@prokodo/ui/checkbox-group"

CSS:

import "@prokodo/ui/checkbox-group.css"

Props

Prop	Type	Default	Required	Description
`legend`	`ReactNode`	—	—	Fieldset legend text.
`hideLegend`	`boolean`	`false`	—	Visually hide the legend (still accessible).
`legendProps`	`object`	—	—	Props forwarded to the legend element.
`ariaLabel`	`string`	—	—	Accessible label for the fieldset.
`options`	`CheckboxGroupOption[]`	—	✅	Array of checkbox items.
`values`	`T[]`	—	—	Controlled selected values.
`defaultValues`	`T[]`	—	—	Uncontrolled initial selected values.
`hiddenInputName`	`string`	—	—	Hidden input name for form submission.
`disabled`	`boolean`	`false`	—	Disable all checkboxes.
`required`	`boolean`	`false`	—	Mark field as required.
`layout`	`"stack" \| "grid"`	`"stack"`	—	Layout of the checkbox items.
`variant`	`"plain" \| "card"`	`"plain"`	—	Visual variant applied to all checkboxes.
`color`	`Variants`	—	—	Accent color variant.
`onChange`	`(values: T[]) => void`	—	—	Called when selection changes.
`className`	`string`	—	—	CSS class on root element.

See src/components/checkbox-group/CheckboxGroup.model.ts for the full CheckboxGroupProps type.

Design Tokens

CheckboxGroup inherits the same tokens as Checkbox. See Checkbox — Design Tokens for the full list.

AIC Note

Use the standard import path in application code:

import { CheckboxGroup } from "@prokodo/ui/checkbox-group"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
1.4.1	Use of Color (A)	🔍 Manual review	Color must not be the only means of conveying information (e.g. error states, required field markers).
2.1.1	Keyboard (A)	✅ Fulfilled	All functionality must be operable via keyboard alone, without requiring specific timing.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
3.3.2	Labels or Instructions (A)	✅ Fulfilled	Every form input requires a programmatically associated label or a visible instruction.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 1 jest-axe assertion(s) across 5 test file(s) · 3 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open CheckboxGroup in Storybook

Source

src/components/checkbox-group/CheckboxGroup.model.ts