Checkbox group component by bjarnef · Pull Request #1243 · umbraco/Umbraco.UI

bjarnef · 2026-01-03T14:19:22Z

Description

I noticed we have a uui-radio-group component, but no uui-checkbox-group component as most other webcomponent libraries I have came across:
https://react-spectrum.adobe.com/v3/CheckboxGroup.html
https://storybook.heroui.com/?path=/story/components-checkboxgroup--default
https://www.radix-ui.com/themes/docs/components/checkbox-group
https://base-ui.com/react/components/checkbox-group

This can be useful for various thing, including form validation of checkbox group, but also make it a bit more consistent with radios.

The checkbox inherits from the boolean input (which toggle also inherits from), but not sure if it would be better checkbox and radio component inherits from a base component instead as these share more similaries.

Default value prorperty need to be an array instead of string as this example:
https://www.radix-ui.com/themes/docs/components/checkbox-group

I think it may be better to move uui-radio-group to it's own folder as this is how much other components are structured and it allows to have separated docs & stories.

The keyboard constants in radio group place should probably be moved to a central place, so other components can use these as well.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Motivation and context

More consistent with radios and allow us to handle configuration on group itself, e.g. an orientation property with vertical | horizontal options - default vertical.

Easier to control gap/spacing between checkbox options (and not just personal preferences when listing checkboxes).

I have started using most similar logic as in radio group component, but some of it can be removed as it doesn't need to consider single choice as checkbox group will always be a multiple selection.

Other things could be relevant like mark as required, validation state, error message etc.
A label/description per checkbox/radio group may also be useful and from accessibility point of view.

How to test?

Screenshots (if appropriate)

Checklist

If my change requires a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.

github-actions · 2026-01-03T14:19:30Z

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for the team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
The automated tests all pass (see "Checks" tab on this PR)
The level of security for this contribution is the same or improved
The level of performance for this contribution is the same or improved
Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

Copilot

Pull request overview

This pull request introduces a new uui-checkbox-group component to provide consistency with the existing uui-radio-group component and enable form validation for groups of checkboxes.

Key Changes:

New uui-checkbox-group component with supporting event classes
Additional methods added to uui-checkbox element (check(), uncheck(), makeFocusable(), makeUnfocusable())
Package configuration, tests, stories, and documentation for the new component

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
packages/uui/lib/index.ts	Exports the new checkbox-group component
packages/uui-radio/lib/uui-radio.element.ts	Minor formatting changes (added blank lines)
packages/uui-checkbox/lib/uui-checkbox.element.ts	Adds group-related methods (check, uncheck, focus management)
packages/uui-checkbox/lib/index.ts	Exports UUICheckboxEvent class
packages/uui-checkbox/lib/UUICheckboxEvent.ts	New event class for checkbox change events
packages/uui-checkbox-group/tsconfig.json	TypeScript configuration for the new package
packages/uui-checkbox-group/rollup.config.js	Build configuration for the new package
packages/uui-checkbox-group/package.json	Package metadata and dependencies
packages/uui-checkbox-group/lib/uui-checkbox-group.test.ts	Basic tests for the component (minimal coverage)
packages/uui-checkbox-group/lib/uui-checkbox-group.story.ts	Storybook examples demonstrating usage
packages/uui-checkbox-group/lib/uui-checkbox-group.element.ts	Main component implementation
packages/uui-checkbox-group/lib/index.ts	Package exports
packages/uui-checkbox-group/lib/UUICheckboxGroupEvent.ts	Event class for checkbox group changes
packages/uui-checkbox-group/README.md	Component documentation
package-lock.json	Dependency lock file updates

Critical Issues Found:

The implementation has a fundamental flaw: it implements single-selection behavior (like radio buttons) when checkbox groups should support multiple simultaneous selections. The component needs significant rework to properly handle multiple checked values, correct keyboard navigation, and appropriate focus management for checkbox semantics rather than radio button semantics.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-03T14:23:30Z

+  #onSelectClick = (e: UUICheckboxEvent) => {
+    if (e.target.checked === true) {
+      this.value = e.target.value;
+      this.#fireChangeEvent();
+    }
+  };


The checkbox group currently implements single-selection behavior (similar to radio buttons), but checkbox groups should support multiple selections. The #onSelectClick method only updates the value when a checkbox is checked to true, and the #updateCheckboxElementsCheckedState method unchecks all other checkboxes when one is selected. This contradicts the fundamental purpose of checkboxes, which is to allow multiple items to be selected simultaneously. The value property should be an array of selected values, not a single string.

Copilot · 2026-01-03T14:23:30Z

+  #updateCheckboxElementsCheckedState(newValue: FormData | FormDataEntryValue) {
+    const notChecked: Array<UUICheckboxElement> = [];
+
+    this.#checkboxElements.forEach((el, index) => {
+      if (el.value === newValue) {
+        el.checked = true;
+        el.makeFocusable();
+        this.#selected = index;
+      } else {
+        el.checked = false;
+        notChecked.push(el);
+      }
+    });
+
+    // If there is a selected checkbox, make all other checkboxes unfocusable.
+    if (this.#selected !== null) {
+      notChecked.forEach(el => el.makeUnfocusable());
+    }
+  }


This method treats checkboxes as mutually exclusive (only one can be checked at a time), which is incorrect for checkbox groups. When a checkbox value matches newValue, all other checkboxes are unchecked. This should instead support multiple checked values by accepting an array or delimited string of values and checking all matching checkboxes.

Copilot · 2026-01-03T14:23:30Z

+import { html, fixture, expect } from '@open-wc/testing';
+import { UUICheckboxGroupElement } from './uui-checkbox-group.element';
+
+describe('UUICheckboxGroupElement', () => {
+  let element: UUICheckboxGroupElement;
+
+  beforeEach(async () => {
+    element = await fixture(html` <uui-checkbox-group></uui-checkbox-group> `);
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UUICheckboxGroupElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
+});


The test coverage for the checkbox group is minimal. There are no tests for multiple selection behavior, value handling, keyboard navigation, or interaction between multiple checkboxes. The radio group component has comprehensive tests that should be adapted for checkbox group behavior.

Copilot · 2026-01-03T14:23:31Z

+export const DefaultValue: Story = {
+  render: () => html`
+    <uui-checkbox-group value="3">
+      <uui-checkbox value="1">one</uui-checkbox>
+      <uui-checkbox value="2">two</uui-checkbox>
+      <uui-checkbox value="3">three</uui-checkbox>
+      <uui-checkbox value="4">four</uui-checkbox>
+    </uui-checkbox-group>
+  `,
+};


The DefaultValue story sets value="3" on the checkbox group, which with the current single-selection implementation would only check one checkbox. For a proper checkbox group implementation that supports multiple selections, this should demonstrate setting multiple default values, for example value="1,3" or using an array format.

Copilot · 2026-01-03T14:23:32Z

+  }
+
+  /**
+   * Call to make the element focusable, this sets tabindex to -1.


The documentation comment incorrectly states that makeUnfocusable sets tabindex to -1 when it should say "make the element unfocusable". The method name already indicates this action.

Suggested change

* Call to make the element focusable, this sets tabindex to -1.

* Call to make the element unfocusable.

Copilot · 2026-01-03T14:23:32Z

+  #selectPreviousCheckbox() {
+    this.value = this.#findAdjacentCheckboxElement(-1)?.value ?? '';
+    this.#checkboxElements[this.#selected ?? 0]?.focus();
+    this.#fireChangeEvent();
+  }
+
+  #selectNextCheckbox() {
+    this.value = this.#findAdjacentCheckboxElement()?.value ?? '';
+    this.#checkboxElements[this.#selected ?? 0]?.focus();
+    this.#fireChangeEvent();
+  }


The keyboard navigation with arrow keys implements single-selection behavior by selecting the previous checkbox and deselecting others. For checkbox groups, arrow keys should typically move focus without changing selection state. Space or Enter should toggle the focused checkbox's checked state while preserving other selections.

Copilot · 2026-01-03T14:23:32Z

+    this.#updateCheckboxElementsCheckedState(newValue as string);
+  }
+
+  #selected: number | null = null;


The #selected field tracks a single selected index, which is appropriate for radio groups but not for checkbox groups where multiple checkboxes can be selected simultaneously. This should either be removed or changed to track an array of selected indices if needed for focus management.

bjarnef · 2026-01-03T17:14:20Z

@iOvergaard @nielslyngsoe it seems there is a small inconsistency between uui-radio and uui-checkbox.

For uui-radio this render label:

<uui-radio
        value="Prolific - I live and breathe Umbraco."
        label="Prolific - I live and breathe Umbraco.">
</uui-radio>

For uui-checkbox this doesn't render label as the slotted content probably not is seen as empty, but a whitespace:

<uui-checkbox
        value="Prolific - I live and breathe Umbraco."
        label="Prolific - I live and breathe Umbraco.">
</uui-checkbox>

but this does:

<uui-checkbox
        value="Prolific - I live and breathe Umbraco."
        label="Prolific - I live and breathe Umbraco."></uui-checkbox>

fe528b0 accounts for only whitespace in slotted content as uui-radio, so both examples above works + if label is set via property:

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

sonarqubecloud · 2026-01-04T10:02:10Z

Quality Gate passed

Issues
18 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

bjarnef · 2026-01-04T10:08:52Z

 import { css, html } from 'lit';

+//import { UUICheckboxEvent } from './UUICheckboxEvent';
+


Not sure about this. Ideally checkbox emit UUICheckboxEvent as radio emit UUIRadioEvent, but checkbox inherits boolean input. Can we override change event inherited, but I guess it may possible be a breaking change - or perhaps trigger both events?

nielslyngsoe · 2026-02-17T12:55:53Z

+    //this.#updateCheckboxElementsCheckedState(newValue as string);
+  }
+
+  #selected: number | null = null;


I think this could be a problem. One thing is what Copilot mentions here, but my concern would be if the choices are updated/appended/reordered/removed while this component is running. So I would suggest finding another way to identify this need.

Also note the value would reflect what is selected?, so could that be used?

I guess, but wouldn't it be a problem for uui-radio-group as well, as it initially used inspiration from this and if we can streamline these:

Umbraco.UI/packages/uui-radio/lib/uui-radio-group.element.ts

Line 56 in a1add75

#selected: number | null = null;

Add checkbox group component

24f9235

Copilot AI review requested due to automatic review settings January 3, 2026 14:19

Copilot started reviewing on behalf of bjarnef January 3, 2026 14:19 View session

Copilot AI reviewed Jan 3, 2026

View reviewed changes

bjarnef added 2 commits January 3, 2026 15:59

Allow multi selections for checkboxes

c6e45b3

Render label

ace7343

bjarnef and others added 6 commits January 3, 2026 18:22

Update packages/uui-checkbox-group/lib/uui-checkbox-group.story.ts

e1f6170

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Fix wording

a44920d

Update packages/uui-checkbox-group/lib/uui-checkbox-group.element.ts

e1e8b92

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/uui-checkbox/lib/uui-checkbox.element.ts

0045651

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Fix method name in docs

86f7bbb

Account for whitespace in slotted content

fe528b0

bjarnef commented Jan 4, 2026

View reviewed changes

nielslyngsoe reviewed Feb 17, 2026

View reviewed changes

	* Call to make the element focusable, this sets tabindex to -1.
	* Call to make the element unfocusable.

		import { css, html } from 'lit';

		//import { UUICheckboxEvent } from './UUICheckboxEvent';

Conversation

bjarnef commented Jan 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of changes

Motivation and context

How to test?

Screenshots (if appropriate)

Checklist

Uh oh!

github-actions Bot commented Jan 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 3, 2026

Choose a reason for hiding this comment

Uh oh!

bjarnef commented Jan 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud Bot commented Jan 4, 2026

Quality Gate passed

Uh oh!

bjarnef Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

nielslyngsoe Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

bjarnef Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bjarnef commented Jan 3, 2026 •

edited

Loading

bjarnef commented Jan 3, 2026 •

edited

Loading