UI Skillbook
2

Checkbox Group

Holds a set of related checkboxes as one array value, with an optional parent box that selects all.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-checkbox-group and follow the Siteplane Checkbox Group skill it prints for this task.

Paste this into your agent.

Checkbox Group lets people pick any number of related options, such as notification channels, permissions or visible columns. It shares size and selection across the boxes and can show a mixed parent state.

Install

bashnpx shadcn@4.18.0 add @siteplane/checkbox-group

Import it from @/siteplane/components/checkbox-group. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Radio Group: Pick Radio Group when people may choose only one option.
  • vs Combobox: Pick Combobox with multiple when the list is long enough to need search.
  • vs Toggle Group: Pick Toggle Group with multiple for compact tool options that act on press and do not submit.

Rules

  • Give each Checkbox a unique value. Control selection with value and onValueChange when needed.
  • For select-all, mark one Checkbox as parent and list each child's value in allValues.
  • Render the Field as a Fieldset with a legend. That names the group and applies the Field name to each box.
  • For a horizontal layout, use className="flex-row gap-4". Your gap utility replaces the default 8 px vertical gap.

Reference

  • Checkbox Group docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-checkbox-group

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Checkboxby UI Skillbook

A box for one independent yes/no choice, with indeterminate state and form submission built in.

Siteplane UI

Siteplane Date Fieldby UI Skillbook

A typed date input built from day, month and year segments, with an optional calendar popover.

Siteplane UI

Siteplane Fieldby UI Skillbook

Ties a control to its label, help text and validation messages, with top or floating labels.

Siteplane UI

Siteplane Fieldsetby UI Skillbook

Groups related form fields under a shared legend and optional description, and can disable them together.

Siteplane UI

Back to Siteplane UI