Skip to content

feat(checkbox-group): add RuiCheckboxGroup component#524

Merged
kelsos merged 1 commit intorotki:mainfrom
kelsos:feat/checkbox-group
Apr 28, 2026
Merged

feat(checkbox-group): add RuiCheckboxGroup component#524
kelsos merged 1 commit intorotki:mainfrom
kelsos:feat/checkbox-group

Conversation

@kelsos
Copy link
Copy Markdown
Member

@kelsos kelsos commented Apr 28, 2026

Summary

  • Adds RuiCheckboxGroup — a multi-select grouping primitive with v-model array of selected values, mirroring RuiRadioGroup's public API (label, hint, errorMessages, successMessages, hideDetails, disabled, color, size, required, inline).
  • RuiCheckbox gains an optional generic value prop and joins a group via provide/inject when nested under RuiCheckboxGroup. Outside a group it stays a plain boolean checkbox (backward compatible).
  • Includes Storybook stories, unit tests, an example app section, and e2e coverage.

Closes #50.

Design notes

  • Provide/inject (rather than slot-VNode iteration like RuiRadioGroup) keeps RuiCheckbox's public modelValue typed as boolean, so existing internal consumers (RuiDataTable, RuiTableHead) are unaffected.
  • The injected context uses MaybeRefOrGetter<T> + toValue() for group-level disabled/color/size propagation.
  • Children inside a group auto-suppress their per-row RuiFormTextDetail so the group's own hint/error renders cleanly.

Test plan

  • pnpm typecheck (lib + example) — clean
  • pnpm lint — clean (0 errors)
  • pnpm --filter @rotki/ui-library test:run — 1080/1080 unit tests pass
  • pnpm --filter example test:e2e:dev forms/checkbox.spec.ts — 5/5 pass
  • pnpm --filter @rotki/ui-library build:prod — builds cleanly, web-types regenerated
  • Reviewer: spot-check Storybook entries (Components/Forms/Checkbox/CheckboxGroup)

Adds a multi-select grouping primitive that mirrors RuiRadioGroup's API:
shared label, hint, error/success messages, hideDetails, disabled,
color, size, required, and inline layout. The group's v-model is an
array of selected values.

RuiCheckbox gains an optional generic `value` prop and joins a group via
provide/inject when a `RuiCheckboxGroup` is an ancestor; outside a
group it remains a plain boolean checkbox (backward compatible).

Closes rotki#50.
@kelsos kelsos requested a review from a team as a code owner April 28, 2026 15:06
@codecov-commenter
Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 97.50000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 84.78%. Comparing base (41038be) to head (d7928d1).

Files with missing lines Patch % Lines
...forms/checkbox/checkbox-group/RuiCheckboxGroup.vue 95.23% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #524      +/-   ##
==========================================
+ Coverage   84.73%   84.78%   +0.05%     
==========================================
  Files         143      145       +2     
  Lines        5227     5259      +32     
  Branches     1556     1570      +14     
==========================================
+ Hits         4429     4459      +30     
- Misses        798      800       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kelsos kelsos merged commit d7928d1 into rotki:main Apr 28, 2026
5 checks passed
@kelsos kelsos deleted the feat/checkbox-group branch April 28, 2026 15:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Checkbox Group: Create checkbox group component

2 participants