feat(checkbox): add card appearance to Checkbox.Group - #834
Merged
Merged
Conversation
Checkbox.Group gains appearance="card" and orientation, and Checkbox.Item gains appearance and description, matching Radio.Group's card appearance: one card outlined with ring-kumo-line and border-kumo-line dividers (rows when vertical, a two-column grid when horizontal), a tinted selected row, a kumo-elevated hover, 1px controls, and Field's 8px legend gap. Card items place the checkbox after the label unless controlFirst is set. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://nanda-checkbox-card-appearance-kumo-docs.design-engineering.workers.dev (commit 58762e4)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
Contributor
|
LGTM! Review notes
|
commit: |
Contributor
📐 Bundle SizeConsumer fixtures bundled against
npm tarball: 546 files, 1.50 MB packed, 6.94 MB unpacked.
|
Contributor
Visual contractsLinux Chromium references exercised by the PR's 1 curated contracttruncating text trigger
|
mattrothenberg
approved these changes
Oct 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a card appearance to
Checkbox.Groupwith the same styles asRadio.Group's card appearance from #833. The two PRs are independent; this one is based onmain.New props
Checkbox.Group:appearance("default"|"card") andorientation("vertical"|"horizontal").Checkbox.Item:appearance(overrides the group) anddescription(shown in card appearance only).controlFirston the group is now optional. Card items default to the checkbox after the label (like radio cards'controlPosition="end"); the default appearance still defaults to checkbox first, so existing usage is unchanged.KUMO_CHECKBOX_VARIANTSandcheckboxVariants()gain anappearanceaxis, mirroring radio.Card styles (identical to the radio card)
ring ring-kumo-line, withborder-kumo-linedividers. Vertical groups stack the items as rows; horizontal groups use a two-column grid, and a lone last item has no stray divider.bg-kumo-tint. Hover:bg-kumo-elevated, except on the selected row, which keeps its tint. No hover transition.bg-clip-paddingstops the tint from darkening the translucent dividers.ring-kumo-linering (2px brand ring on keyboard focus). The checkbox keeps its square shape and check/minus icons.Field's 8px label-to-control gap for the legend and description. The edge is a ring, so the visible gap is 7px, the same as aFieldlabel to its input.Horizontal orientation is new for
Checkbox.Group; with the default appearance it wraps items in a row, asRadio.Groupdoes.Screenshots
Validation
Checkbox unit tests pass, including four new ones: vertical and horizontal card joining, card descriptions, and default appearance keeping the checkbox first. The full kumo unit suite passes (1411 tests).
tsc --noEmit,vp lint(kumo and the docs demo), andvp fmtare clean.Added "Checkbox Card" and "Checkbox Card (Horizontal)" demos to the docs and checked them locally: 7px legend gap,
kumo-tinton the selected row,kumo-elevatedon hover, 1px rings.Reviews
bonk has reviewed the change
automated review not possible because: requesting human design review first; bonk can run on the PR afterwards.
Tests
Tests included/updated
Automated tests not possible - manual testing has been completed as follows:
Additional testing not necessary because:
🤖 Generated with Claude Code