CleenUI · Forms · CheckboxGroup

CheckboxGroup

Coordinated group of related checkboxes with select-all, controlled state, and validation.

storybook.cleenui.com · forms-checkboxgroup--default
Open in new window

About CheckboxGroup

CheckboxGroup wraps a set of related Checkbox instances, exposing the selected values as an array. It handles layout (vertical, horizontal, grid), a built-in select-all toggle with indeterminate parent state, and per-group validation messages.

When wired to a form library, the group submits as an array of values rather than individual booleans, matching how multi-select data usually wants to be stored.

When to use it

  • Multi-select preference panels in settings.
  • Tag or category assignment forms.
  • Permission grids with grouped capabilities.
  • Filter sidebars with toggle-each-or-all behavior.

Common props

Prop
Type
Description
options
Option[]
Array of {value, label, description}.
value
string[]
Array of selected values (controlled).
onChange
(values: string[]) => void
Change handler.
layout
"vertical" | "horizontal" | "grid"
Item arrangement.
selectAll
boolean
Render a select-all toggle.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with