fix(Checkbox): react/wc parity

packages/web-components/src/components/checkbox/checkbox-group.ts

@@ -16,7 +16,9 @@ import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import CDSCheckbox from './checkbox';
 import styles from './checkbox.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { CHECKBOX_ORIENTATION } from './defs';
 
+export { CHECKBOX_ORIENTATION };
 /**
  * Check box.
  *
@@ -70,6 +72,12 @@ class CDSCheckboxGroup extends LitElement {
   @property({ type: String, reflect: true, attribute: 'legend-text' })
   legendText;
 
+  /**
+   * Provide the text to be rendered inside of the fieldset <legend>
+   */
+  @property({ type: String, reflect: true, attribute: 'orientation' })
+  orientation = CHECKBOX_ORIENTATION.VERTICAL;
+
   /**
    * Whether the CheckboxGroup should be read-only
    */
@@ -119,7 +127,7 @@ class CDSCheckboxGroup extends LitElement {
   updated(changedProperties) {
     const { selectorCheckbox } = this.constructor as typeof CDSCheckboxGroup;
     const checkboxes = this.querySelectorAll(selectorCheckbox);
-    ['disabled', 'readonly'].forEach((name) => {
+    ['disabled', 'readonly', 'orientation'].forEach((name) => {
       if (changedProperties.has(name)) {
         const { [name as keyof CDSCheckboxGroup]: value } = this;
         // Propagate the property to descendants until `:host-context()` gets supported in all major browsers
@@ -149,6 +157,7 @@ class CDSCheckboxGroup extends LitElement {
       invalidText,
       legendId,
       legendText,
+      orientation,
       readonly,
       warn,
       warnText,
@@ -177,6 +186,8 @@ class CDSCheckboxGroup extends LitElement {
       [`${prefix}--checkbox-group--invalid`]: !readonly && invalid,
       [`${prefix}--checkbox-group--warning`]: showWarning,
       [`${prefix}--checkbox-group--slug`]: hasAILabel,
+      [`${prefix}--checkbox-group--${orientation}`]:
+        orientation === 'horizontal',
     });
 
     return html`
@@ -186,7 +197,8 @@ class CDSCheckboxGroup extends LitElement {
         ?disabled=${disabled}
         aria-readonly=${readonly}
         ?aria-labelledby=${ariaLabelledBy || legendId}
-        ?aria-describedby=${!invalid && !warn && helper ? helperId : undefined}>
+        ?aria-describedby=${!invalid && !warn && helper ? helperId : undefined}
+        orientation=${orientation}>
         <legend class="${prefix}--label" id=${legendId || ariaLabelledBy}>
           ${legendText}
           <slot name="ai-label" @slotchange="${handleSlotChange}"></slot>

packages/web-components/src/components/checkbox/checkbox.scss

@@ -68,6 +68,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-checkbox-group) {
   display: flex;
+  inline-size: 100%;
 }
 
 :host(#{$prefix}-checkbox-group) .#{$prefix}--checkbox-group--slug,
@@ -90,3 +91,10 @@ $css--plex: true !default;
 :host(#{$prefix}-checkbox[ai-label]) ::slotted(#{$prefix}-slug) {
   align-self: center;
 }
+
+:host(#{$prefix}-checkbox-group)
+  .#{$prefix}--checkbox-group--horizontal
+  ::slotted(#{$prefix}-checkbox) {
+  flex: none;
+  margin-inline-end: 1rem;
+}

packages/web-components/src/components/checkbox/checkbox.stories.ts

@@ -14,6 +14,7 @@ import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
 import Folders16 from '@carbon/icons/lib/folders/16.js';
 import '../ai-label/index';
 import './index';
+import { CHECKBOX_ORIENTATION } from './defs';
 
 const checkboxLabel = 'Checkbox label';
 
@@ -26,6 +27,7 @@ const defaultArgs = {
   readonly: false,
   warn: false,
   warnText: 'Warn message goes here',
+  orientation: 'vertical',
 };
 
 const controls = {
@@ -50,6 +52,11 @@ const controls = {
     control: 'textNullable',
     description: 'Provide the text to be rendered inside of the fieldset.',
   },
+  orientation: {
+    control: 'select',
+    description: 'Provide how checkbox should be displayed.',
+    options: CHECKBOX_ORIENTATION,
+  },
   readonly: {
     control: 'boolean',
     description: 'Specify whether the checkbox group is read-only.',
@@ -135,7 +142,7 @@ const actions = html`
 export const WithAILabel = {
   render: () => html`
     <div style="width: 400px">
-      <cds-checkbox-group legend-text="Group label">
+      <cds-checkbox-group legend-text="Group label" orientation="vertical">
         <cds-ai-label alignment="bottom-left">
           ${content}${actions}</cds-ai-label
         >
@@ -144,7 +151,7 @@ export const WithAILabel = {
         <cds-checkbox>Checkbox label</cds-checkbox>
       </cds-checkbox-group>
 
-      <cds-checkbox-group legend-text="Group label">
+      <cds-checkbox-group legend-text="Group label" orientation="vertical">
         <cds-checkbox>
           Checkbox label
           <cds-ai-label alignment="bottom-left">
@@ -160,7 +167,7 @@ export const WithAILabel = {
         <cds-checkbox>Checkbox label</cds-checkbox>
       </cds-checkbox-group>
 
-      <cds-checkbox-group legend-text="Group label">
+      <cds-checkbox-group legend-text="Group label" orientation="vertical">
         <cds-checkbox>
           Checkbox label
           <cds-ai-label alignment="bottom-left" kind="inline">
@@ -190,6 +197,7 @@ export const Playground = {
     invalid,
     invalidText,
     legendText,
+    orientation,
     warn,
     warnText,
   }) => html`
@@ -199,6 +207,7 @@ export const Playground = {
       ?invalid="${invalid}"
       invalid-text="${invalidText}"
       legend-text="${legendText}"
+      orientation="${orientation}"
       ?readonly="${readonly}"
       ?warn="${warn}"
       warn-text="${warnText}">

packages/web-components/src/components/checkbox/defs.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * How to lay out radio buttons.
+ */
+export enum CHECKBOX_ORIENTATION {
+  /**
+   * Laying out radio buttons horizontally.
+   */
+  HORIZONTAL = 'horizontal',
+
+  /**
+   * Laying out radio buttons vertically.
+   */
+  VERTICAL = 'vertical',
+}