feat(CheckboxGroup): new component #3862

TribeWeb · 2025-04-11T15:16:44Z

🔗 Linked issue

Resolves #3050

❓ Type of 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

The UCheckbox component currently handles single instances of a checkbox only, returning a string. Being able to put several checkboxes together and returning an array is a common user requirement that has already been implemented in reka-ui but not yet in Nuxt UI. The new component builds on the reka example and adheres to the same patterns found in the existing URadioGroup component.

#3178 has added some beautiful and very useful styling for the URadioGroup component via the new table & card variants and so these same variants have been implemented in the new UCheckboxGroup component too.

📝 Checklist

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

sandros94 · 2025-04-11T17:23:44Z

@benjamincanac you know I'm a super fan of this 😬 (#895)

EDIT: oh man, fall 2023, time flies...

pkg-pr-new · 2025-04-11T23:00:20Z

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

commit: 6fa0ada

benjamincanac · 2025-04-12T09:56:12Z

src/runtime/components/CheckboxGroup.vue

+          {{ legend }}
+        </slot>
+      </legend>
+      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">


Is there a reason to not use the UCheckbox component here instead of re-implementing everything? 🤔

Good question! I started off with the intention of using the UCheckbox component. I felt that making the component as close to URadioGroup in structure was important to ensure consistency in behaviour in the new variants and how they applied to each component. As I proceeded, I became more confident I could achieve that aim by re-implementing instead. I'm willing to defer to your experience and refactor as suggested - this is my first pull request in any codebase so I'm more than happy to be guided.

We can left it like that I guess but I would share the theme between checkbox and checkbox-group though. The new variants should also be available on Checkbox.

You can check how textarea imports input theme for example.

docs/content/3.components/checkbox-group.md

Co-authored-by: Benjamin Canac <[email protected]>

test/components/CheckboxGroup.spec.ts

docs/content/3.components/checkbox-group.md

Co-authored-by: Romain Hamel <[email protected]>

…heckBoxGroup

romhml · 2025-04-20T14:23:21Z

Thanks for all your work @TribeWeb! I'll try to check this out and fix the failing tests soon!

benjamincanac · 2025-04-22T12:40:54Z

So I've made quite a few changes, would you mind having a look?

benjamincanac · 2025-04-22T16:03:38Z

Thanks @TribeWeb! 😊

druskacik · 2025-04-23T14:35:05Z

Is there a way to style the labels of the checkboxes? This does not work in version https://pkg.pr.new/@nuxt/ui@3862:

<UCheckboxGroup v-model="selectedCountriesValue" :items="selectedCountriesItems" @change="emitFilters">
    <template #label="{ item }">
      <span class="italic">
        {{ item.label }}
      </span>
    </template>
  </UCheckboxGroup>

TribeWeb · 2025-04-23T17:09:28Z

Is there a way to style the labels of the checkboxes? This does not work in version https://pkg.pr.new/@nuxt/ui@3862:
<UCheckboxGroup v-model="selectedCountriesValue" :items="selectedCountriesItems" @change="emitFilters">
    <template #label="{ item }">
      <span class="italic">
        {{ item.label }}
      </span>
    </template>
  </UCheckboxGroup>

Good spot @druskacik!

@benjamincanac - I have a potential fix:
To add the template/slots into CheckboxGroup.vue as below.
Should I make another pull request?

<UCheckbox
    v-for="item in normalizedItems"
    :key="item.value"
    v-bind="{ ...item, ...checkboxProps }"
    :color="color"
    :size="size"
    :name="name"
    :disabled="item.disabled || disabled"
>
    <template #label>
        <slot name="label" :item="item">
            {{ item.label }}
        </slot>
    </template>
    <template #description>
        <slot name="description" :item="item">
            {{ item.description }}
        </slot>
    </template>
</UCheckbox>

benjamincanac · 2025-04-23T17:10:05Z

@TribeWeb We've indeed forgot to proxy the slots as well as the ui prop!

benjamincanac · 2025-04-24T10:39:21Z

@TribeWeb @druskacik Should be fixed with bc06185

TribeWeb added 3 commits April 11, 2025 16:01

docs: add page for UCheckboxGroup

0ab5e50

feat: create checkboxGroup to handle arrays and use radioGroup variants

0833ff6

chore: add checkboxGroup to all component and types lists

926b783

sandros94 added v3 #1289 enhancement New feature or request labels Apr 11, 2025

chore: rerun tests

0b531fa

docs: add missing description and category

ac8ca04

benjamincanac reviewed Apr 12, 2025

View reviewed changes

docs/content/3.components/checkbox-group.md Outdated Show resolved Hide resolved

benjamincanac changed the title ~~feat: New component - UCheckboxGroup~~ feat(CheckboxGroup): new component Apr 12, 2025

benjamincanac requested a review from romhml April 12, 2025 09:57

TribeWeb and others added 3 commits April 12, 2025 22:26

Update docs/content/3.components/checkbox-group.md

a60a2bb

Co-authored-by: Benjamin Canac <[email protected]>

Merge branch 'v3' into checkBoxGroup

b180da5

chore: refactor after #3855

3248184

benjamincanac requested a review from sandros94 April 13, 2025 09:16

romhml requested changes Apr 13, 2025

View reviewed changes

test/components/CheckboxGroup.spec.ts Outdated Show resolved Hide resolved

test/components/CheckboxGroup.spec.ts Outdated Show resolved Hide resolved

docs/content/3.components/checkbox-group.md Show resolved Hide resolved

romhml and others added 12 commits April 13, 2025 16:25

docs(CheckboxGroup): add to form elements example

4980a65

fix: test/components/CheckboxGroup.spec.ts

e09e3be

Co-authored-by: Romain Hamel <[email protected]>

fix: imports in test/components/CheckboxGroup.spec.ts

e23a21f

Co-authored-by: Romain Hamel <[email protected]>

docs(CheckboxGroup): fix initial modelValue

7a7180c

feat: Apply new variant styling

46b0ace

feat: refactor to reuse UCheckbox

e529936

feat: share and reuse styling between both components

e4d8719

chore: update playground with variant chooser

cf7f46d

chore: new snapshots

e7a5aa4

chore: new snapshots

f5d8f7d

chore: fixed my initial mistakes in test file - still failing 4 tests

27c3046

Merge branch 'checkBoxGroup' of https://github.com/TribeWeb/ui into c…

37abbc8

…heckBoxGroup

TribeWeb added 6 commits April 19, 2025 23:52

chore: refactor using vueUse-createReusableTemplate to reduce repetition

30d769f

fix: reintroduce indeterminate state & disabled state

8d7aabf

fix: default and model test values

6323990

chore: update snapshots

3c4fa12

Merge branch 'v3' into checkBoxGroup

275f3fb

fix: removed unecessary v-model repetition

d9217f5

TribeWeb and others added 10 commits April 20, 2025 23:17

Merge branch 'v3' into checkBoxGroup

b31c0d4

fix: revert v-model

c84e410

Merge branch 'v3' into checkBoxGroup

f732747

Merge branch 'v3' into pr/3862

07d4e69

up

b659b91

up

b6cdb4c

up

3748e40

up

f52bb87

up

5a4479a

up

bf5b545

benjamincanac requested a review from romhml April 22, 2025 12:42

benjamincanac added 2 commits April 22, 2025 14:48

up

c906db0

up

22db591

benjamincanac removed the enhancement New feature or request label Apr 22, 2025

test(CheckboxGroup): fix form tests

6fa0ada

benjamincanac approved these changes Apr 22, 2025

View reviewed changes

benjamincanac merged commit 9c3d53a into nuxt:v3 Apr 22, 2025
5 checks passed

feat(CheckboxGroup): new component #3862

feat(CheckboxGroup): new component #3862

Uh oh!

Conversation

TribeWeb commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

sandros94 commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac Apr 12, 2025

Choose a reason for hiding this comment

Uh oh!

TribeWeb Apr 12, 2025

Choose a reason for hiding this comment

Uh oh!

benjamincanac Apr 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

romhml commented Apr 20, 2025

Uh oh!

benjamincanac commented Apr 22, 2025

Uh oh!

Uh oh!

benjamincanac commented Apr 22, 2025

Uh oh!

druskacik commented Apr 23, 2025

Uh oh!

TribeWeb commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac commented Apr 23, 2025

Uh oh!

benjamincanac commented Apr 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

TribeWeb commented Apr 11, 2025 •

edited

Loading

sandros94 commented Apr 11, 2025 •

edited

Loading

pkg-pr-new bot commented Apr 11, 2025 •

edited

Loading

TribeWeb commented Apr 23, 2025 •

edited

Loading