fix(Checkbox/RadioGroup): add flex-wrap on list and card variants

[hacknug]

🔗 Linked issue

Closes #6912

❓ Type of change

Not sure if it should be considered a bug fix or a breaking change.

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds .flex-wrap to the fieldset element of both CheckboxGroup and RadioGroup. This improves how the children checkboxes and radios are rendered in narrow containers.

Without wrapping, the root element currently ends up overflowing its container.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: a42f1245-88bf-423e-a717-38c4b7b6ce62

📥 Commits

Reviewing files that changed from the base of the PR and between 374d6b1 and 2e4d13f.

⛔ Files ignored due to path filters (4)

• test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/CheckboxGroup.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/RadioGroup-vue.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/RadioGroup.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• src/theme/checkbox-group.ts
• src/theme/radio-group.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.

---

📝 Walkthrough

Walkthrough

The checkbox group and radio group fieldset classes now include flex-wrap, allowing options to span multiple lines within their parent container. The Nuxt test utility setup version also changes from 4.1.0 to 4.2.0.

Estimated code review effort: 2 (Simple) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 2e4d1

This localized change enables checkbox and radio items to wrap in narrow containers, addressing overflow without an identified merge-blocking risk; it is merge-ready after normal checks and review.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The theme changes are in scope for issue #6912, but updating test/nuxt/.nuxtrc from @nuxt/test-utils 4.1.0 to 4.2.0 is unrelated to the reported component overflow.	Remove the unrelated @nuxt/test-utils version update from this pull request, or link it to a separate objective or issue.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes add flex-wrap to the fieldset styles for both CheckboxGroup and RadioGroup, which addresses the overflow objective in issue #6912.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Title check	✅ Passed	The title clearly and concisely describes the main change: adding flex-wrap to the list and card variants of CheckboxGroup and RadioGroup.
Description check	✅ Passed	The description accurately explains the wrapping behavior, the overflow issue, and the affected components.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

🟡 Changes recommended

The new base flex-wrap can interact incorrectly with the table variant’s -space-x-px/-space-y-px border-collapsing layout, potentially causing overlap artifacts when wrapping occurs.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR updates the default styling for CheckboxGroup and RadioGroup so their internal fieldset can wrap, preventing option overflow in narrow containers. It also refreshes related test snapshots and bumps the Nuxt test-utils setup version used by the test harness.

Changes:

• Add flex-wrap to the fieldset slot styling in src/theme/checkbox-group.ts and src/theme/radio-group.ts.
• Update Vitest snapshot outputs for CheckboxGroup/RadioGroup to reflect the new fieldset class list.
• Bump @nuxt/test-utils setup version in test/nuxt/.nuxtrc.

File summaries

File	Description
test/nuxt/.nuxtrc	Updates Nuxt test-utils setup version used in tests.
test/components/snapshots/RadioGroup.spec.ts.snap	Snapshot updates reflecting added flex-wrap on the rendered fieldset.
test/components/snapshots/RadioGroup-vue.spec.ts.snap	Snapshot updates reflecting added flex-wrap on the rendered fieldset (Vue playground variant).
test/components/snapshots/CheckboxGroup.spec.ts.snap	Snapshot updates reflecting added flex-wrap on the rendered fieldset.
test/components/snapshots/CheckboxGroup-vue.spec.ts.snap	Snapshot updates reflecting added flex-wrap on the rendered fieldset (Vue playground variant).
src/theme/radio-group.ts	Adds flex-wrap to the fieldset slot theme classes.
src/theme/checkbox-group.ts	Adds flex-wrap to the fieldset slot theme classes.

Review details

• Files reviewed: 7/7 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing hacknug:fix/flex-wrap (2e4d13f) with v4 (6caa6a9)}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6913

commit: 2e4d13f

[benjamincanac]

Thanks!