From b474ff13da8042172ffa64876f4a5fe8ef23240e Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Tue, 13 May 2025 15:46:22 +0200
Subject: [PATCH 1/7] feat(GlFormCheckbox): remove BFormCheckbox from
 GlFormCheckbox

Part of a larger migration to remove Bootstrap Vue from GitLab UI

BREAKING CHANGE: support for the following props have been dropped:
- autofocus
- button
- button-variant
- form
- switch
- inline
- plain
- size
---
 .../base/form/form_checkbox/form_checkbox.md  | 177 +++++++-
 .../form/form_checkbox/form_checkbox.spec.js  | 420 +++++++++++++++++-
 .../form_checkbox/form_checkbox.stories.js    |   5 +-
 .../base/form/form_checkbox/form_checkbox.vue | 304 +++++++++++--
 4 files changed, 867 insertions(+), 39 deletions(-)

diff --git a/src/components/base/form/form_checkbox/form_checkbox.md b/src/components/base/form/form_checkbox/form_checkbox.md
index 05fab87270..cc710b2776 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.md
+++ b/src/components/base/form/form_checkbox/form_checkbox.md
@@ -1,6 +1,181 @@
-Form checkbox groups for general use inside forms.
+`<gl-form-checkbox-group>` and `<gl-form-checkbox>` implement custom checkbox inputs that ensure
+consistent appearance across all browsers while maintaining the semantic structure and
+accessibility of native elements, making them robust replacements for default browser checkboxes.
 
 ## Stacked
 
 By default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` and is
 non-changeable at this time.
+
+## Checkbox group options array
+
+`options` can be an array of strings or objects. Available fields:
+
+- `value` The selected value which will be set on `v-model`
+- `disabled` Disables item for selection
+- `text` Display text, or `html` Display basic inline html
+
+`value` can be a string, number, or simple object. Avoid using complex types in values.
+
+If both `html` and `text` are provided, `html` will take precedence. Only basic/native HTML is
+supported in the `html` field (components will not work). Note that not all browsers will render
+inline html (i.e. `<i>`, `<strong>`, etc.) inside `<option>` elements of a `<select>`.
+
+> **Note:** Be cautious of placing user supplied content in
+> the `html` field, as it may make you vulnerable to XSS
+> attacks, if you do not first sanitize user supplied string.
+
+```js
+const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']
+```
+
+If an array entry is a string, it will be used for both the generated `value` and `text` fields.
+
+You can mix using strings and [objects](#options-as-an-array-of-objects) in the array.
+
+### Options as an array of objects
+
+```js
+const options = [
+  { text: 'Item 1', value: 'first' },
+  { text: 'Item 2', value: 'second' },
+  { html: '<b>Item</b> 3', value: 'third', disabled: true },
+  { text: 'Item 4' },
+  { text: 'Item 5', value: { foo: 'bar', baz: true } }
+]
+```
+
+If `value` is missing, then `text` will be used as both the `value` and `text` fields. If you use
+the `html` property, you must supply a `value` property.
+
+### Changing the option field names
+
+If you want to customize the field property names (for example using `name` field for display
+`text`) you can easily change them by setting the `text-field`, `html-field`, `value-field`, and
+`disabled-field` props to a string that contains the property name you would like to use:
+
+```html
+<template>
+  <div>
+    <gl-form-checkbox-group
+      v-model="selected"
+      :options="options"
+      class="mb-3"
+      value-field="item"
+      text-field="name"
+      disabled-field="notEnabled"
+    ></gl-form-checkbox-group>
+    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        selected: [],
+        options: [
+          { item: 'A', name: 'Option A' },
+          { item: 'B', name: 'Option B' },
+          { item: 'D', name: 'Option C', notEnabled: true },
+          { item: { d: 1 }, name: 'Option D' }
+        ]
+      }
+    }
+  }
+</script>
+```
+
+## `<gl-form-checkbox>` as child of `<gl-form-checkbox-group>`
+
+Instead of using the `options` prop, you can also manually place `<gl-form-checkbox>` in
+`<gl-form-checkbox-group>`. You can also mix and match both.
+Manually placed `<gl-form-checkbox>` inputs will appear _below_ any checkbox inputs generated
+by the `options` prop. To have them appear _above_ the inputs generated by `options`,
+place them in the named slot `first`.
+
+## Checkbox values and v-model
+
+By default, `<gl-form-checkbox>` value will be `true` when checked and `false` when unchecked.
+You can customize the checked and unchecked values by specifying the `value` and
+`unchecked-value` properties, respectively.
+
+The `v-model` binds to the `checked` prop. When you have multiple checkboxes that bind to
+a single data state variable, you must provide an array reference (`[]`) to your `v-model`.
+Do not use the `checked` prop directly.
+
+Note that when `v-model` is bound to multiple checkboxes (i.e an array ref), the
+`unchecked-value` is not used. Only the value(s) of the checked checkboxes will be
+returned in the `v-model` bound array. You should provide a unique value for each
+checkbox's `value` prop (the default of `true` will not work when bound to an array).
+
+To pre-check any checkboxes, set the `v-model` to the value(s) of the checks that you
+would like pre-selected.
+
+When placing individual `<gl-form-checkbox>` components within a `<gl-form-checkbox-group>`,
+most props and the `v-model` are inherited from the `<gl-form-checkbox-group>`.
+
+Note: the `unchecked-value` prop does not affect the native `<input>`'s `value` attribute,
+because browsers don't include unchecked boxes in form submissions.
+To guarantee that one of two values is submitted in a native `<form>` submit
+(e.g. `'yes' or `'no'`), use radio inputs instead. This is the same limitation that [Vue
+has with native checkbox inputs](https://vuejs.org/guide/essentials/forms.html#checkbox-1).
+
+## Multiple checkboxes and accessibility
+
+When binding multiple checkboxes together, you must set the `name` prop to the same value for
+all `<gl-form-checkbox>`s in the group individually or via the `name` prop of `<gl-form-checkbox-group>`.
+This will inform users of assistive technologies that the checkboxes are related and enables
+native browser keyboard navigation.
+
+Whenever using multiple checkboxes, it is recommended that the checkboxes be placed in a
+`<gl-form-group>` component to associate a label with the entire group of checkboxes.
+
+## Contextual states
+
+`<gl-form-checkbox-group>` and `<gl-form-checkbox>` includes validation styles for
+valid and invalid states.
+
+Generally speaking, you'll want to use a particular state for specific types of feedback:
+
+- `false` (denotes invalid state) is great for when there's a blocking or required field.
+A user must fill in this field properly to submit the form.
+- `true` (denotes valid state) is ideal for situations when you have per-field validation
+throughout a form and want to encourage a user through the rest of the fields.
+- `null` Displays no validation state (neither valid nor invalid)
+
+To apply one of the contextual state icons on `<gl-form-checkbox>`, set the `state` prop to
+`false` (for invalid), `true` (for valid), or `null` (no validation state).
+
+## Required constraint
+
+When using individual `<gl-form-checkbox>` components (not in a `<gl-form-checkbox-group>`),
+and you want the checkbox(es) to be `required` in your form, you must provide a `name on each
+`<gl-form-checkbox>` in order for the required constraint to work. All `<gl-form-checkbox>`
+components tied to the same `v-model` must have the same `name`.
+
+The `name` is required in order for Assistive Technologies (such as screen readers, and keyboard
+only users) to know which checkboxes belong to the same form variable (the name also automatically
+enables native browser keyboard navigation), hence `required` will only work if `name` is set.
+`<gl-form-checkbox-group>` will automatically generate a unique input name if one is not provided on
+the group.
+
+## Indeterminate (tri-state) support
+
+Normally a checkbox input can only have two states: checked or unchecked. They can have any value,
+but they either submit that value (checked) or don't (unchecked) with a form submission.
+
+Visually, there are actually three states a checkbox can be in: checked, unchecked, or
+indeterminate.
+
+The indeterminate state is visual only. The checkbox is still either checked or unchecked as a
+value. That means the visual indeterminate state masks the real value of the checkbox.
+
+`<gl-form-checkbox>` supports setting this visual indeterminate state via the `indeterminate` prop
+(defaults to `false`). Clicking the checkbox will clear its indeterminate state.
+
+### Indeterminate state and accessibility
+
+Not all screen readers will convey the indeterminate state to screen reader users. So it is
+recommended to provide some form of textual feedback to the user (possibly by via the `.sr-only`
+class) if the indeterminate state has special contextual meaning in your application.
diff --git a/src/components/base/form/form_checkbox/form_checkbox.spec.js b/src/components/base/form/form_checkbox/form_checkbox.spec.js
index a2d0e9fb60..8a4a853cef 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.spec.js
+++ b/src/components/base/form/form_checkbox/form_checkbox.spec.js
@@ -8,7 +8,10 @@ describe('GlFormCheckbox', () => {
     wrapper = mount(GlFormCheckbox, options);
   };
 
-  it('can start checked', async () => {
+  const findInput = () => wrapper.find('input');
+  const findLabel = () => wrapper.find('label');
+
+  it('can start checked', () => {
     createComponent({
       propsData: {
         checked: 'checked_value',
@@ -19,4 +22,419 @@ describe('GlFormCheckbox', () => {
 
     expect(wrapper.find('input[name="foo"]').element.checked).toBe(true);
   });
+
+  it('default has structure <div><input><label></label></div>', () => {
+    createComponent({
+      propsData: {
+        checked: '',
+        value: 'a',
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(wrapper).toBeDefined();
+    expect(wrapper.element.tagName).toBe('DIV');
+
+    const { children } = wrapper.element;
+    expect(children).toHaveLength(2);
+    expect(children[0].tagName).toBe('INPUT');
+    expect(children[1].tagName).toBe('LABEL');
+  });
+
+  it('default has wrapper class custom-control and custom-checkbox', () => {
+    createComponent({
+      propsData: {
+        checked: '',
+        value: 'a',
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(wrapper.classes()).toEqual(['gl-form-checkbox', 'custom-checkbox', 'custom-control']);
+  });
+
+  it('default has input type checkbox', () => {
+    createComponent({
+      propsData: {
+        checked: '',
+        value: 'a',
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input.attributes('type')).toBeDefined();
+    expect(input.attributes('type')).toBe('checkbox');
+  });
+
+  it('default does not have aria-label attribute on input', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().attributes('aria-label')).toBeUndefined();
+  });
+
+  it('has aria-label attribute on input when aria-label provided', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+        ariaLabel: 'bar',
+      },
+      slots: {
+        default: 'foo',
+      },
+    });
+
+    expect(findInput().attributes('aria-label')).toBe('bar');
+  });
+
+  it('default has input class custom-control-input', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().classes()).toEqual(['custom-control-input']);
+  });
+
+  it('default has label class custom-control-label', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findLabel().classes()).toEqual(['custom-control-label']);
+  });
+
+  it('has default slot content in label', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findLabel().text()).toBe('foobar');
+  });
+
+  it('default has no disabled attribute on input', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().attributes('disabled')).toBeUndefined();
+  });
+
+  it('has disabled attribute on input when prop disabled set', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+        disabled: true,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().attributes('disabled')).toBeDefined();
+  });
+
+  it('default has no required attribute on input', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().attributes('required')).toBeUndefined();
+  });
+
+  it('does not have required attribute on input when prop required set and name prop not provided', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+        required: true,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().attributes('required')).toBeUndefined();
+  });
+
+  it('has required attribute on input when prop required and name set', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+        name: 'test',
+        required: true,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().attributes('required')).toBeDefined();
+  });
+
+  it('default has no name attribute on input', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(findInput().attributes('name')).toBeUndefined();
+  });
+
+  it('has name attribute on input when name prop set', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+        name: 'test',
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input.attributes('name')).toBeDefined();
+    expect(input.attributes('name')).toBe('test');
+  });
+
+  it('has custom attributes transferred to input element', () => {
+    createComponent({
+      propsData: {
+        id: 'foo',
+        foo: 'bar',
+      },
+    });
+
+    const input = findInput();
+    expect(input.attributes('foo')).toBeDefined();
+    expect(input.attributes('foo')).toBe('bar');
+  });
+
+  it('default has no input validation classes by default', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+    expect(input.classes()).not.toContain('is-invalid');
+    expect(input.classes()).not.toContain('is-valid');
+  });
+
+  it('default has no input validation classes when state=null', () => {
+    createComponent({
+      propsData: {
+        state: null,
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+    expect(input.classes()).not.toContain('is-invalid');
+    expect(input.classes()).not.toContain('is-valid');
+  });
+
+  it('default has input validation class is-valid when state=true', () => {
+    createComponent({
+      propsData: {
+        state: true,
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+    expect(input.classes()).not.toContain('is-invalid');
+    expect(input.classes()).toContain('is-valid');
+  });
+
+  it('default has input validation class is-invalid when state=false', () => {
+    createComponent({
+      propsData: {
+        state: false,
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+    expect(input.classes()).toContain('is-invalid');
+    expect(input.classes()).not.toContain('is-valid');
+  });
+
+  it('does not have input indeterminate set by default', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+    expect(input.element.indeterminate).toBe(false);
+  });
+
+  it('has input indeterminate set by when indeterminate=true', () => {
+    createComponent({
+      propsData: {
+        checked: false,
+        indeterminate: true,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+    expect(input.element.indeterminate).toBe(true);
+  });
+
+  it('has input indeterminate set by when indeterminate set to true after mount', async () => {
+    createComponent({
+      propsData: {
+        checked: false,
+        indeterminate: false,
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+    expect(input.element.indeterminate).toBe(false);
+
+    await wrapper.setProps({ indeterminate: true });
+    expect(input.element.indeterminate).toBe(true);
+
+    await wrapper.setProps({ indeterminate: false });
+    expect(input.element.indeterminate).toBe(false);
+  });
+
+  it('emits a change event when clicked', async () => {
+    createComponent({
+      attachTo: document.body,
+      propsData: {
+        uncheckedValue: 'foo',
+        value: 'bar',
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    expect(wrapper.emitted('change')).toBeUndefined();
+
+    const input = findInput();
+    expect(input).toBeDefined();
+
+    await input.trigger('click');
+    expect(wrapper.emitted('change')).toBeDefined();
+    expect(wrapper.emitted('change')).toHaveLength(1);
+    expect(wrapper.emitted('change')[0][0]).toEqual('bar');
+
+    await input.trigger('click');
+    expect(wrapper.emitted('change')).toBeDefined();
+    expect(wrapper.emitted('change')).toHaveLength(2);
+    expect(wrapper.emitted('change')[1][0]).toEqual('foo');
+  });
+
+  it('works when v-model bound to an array', async () => {
+    createComponent({
+      attachTo: document.body,
+      propsData: {
+        value: 'bar',
+        checked: ['foo'],
+      },
+      slots: {
+        default: 'foobar',
+      },
+    });
+
+    const input = findInput();
+    expect(input).toBeDefined();
+
+    await input.trigger('click');
+    expect(wrapper.emitted('change')).toBeDefined();
+    expect(wrapper.emitted('change')).toHaveLength(1);
+    expect(wrapper.emitted('change')[0][0]).toEqual(['foo', 'bar']);
+
+    await input.trigger('click');
+    expect(wrapper.emitted('change')).toBeDefined();
+    expect(wrapper.emitted('change')).toHaveLength(2);
+    expect(wrapper.emitted('change')[1][0]).toEqual(['foo']);
+
+    await wrapper.setProps({ checked: [] });
+    expect(wrapper.emitted('change')).toBeDefined();
+    expect(wrapper.emitted('change')).toHaveLength(2);
+
+    await input.trigger('click');
+    expect(wrapper.emitted('change')).toBeDefined();
+    expect(wrapper.emitted('change')).toHaveLength(3);
+    expect(wrapper.emitted('change')[2][0]).toEqual(['bar']);
+
+    await input.trigger('click');
+    expect(wrapper.emitted('change')).toBeDefined();
+    expect(wrapper.emitted('change')).toHaveLength(4);
+    expect(wrapper.emitted('change')[3][0]).toEqual([]);
+  });
 });
diff --git a/src/components/base/form/form_checkbox/form_checkbox.stories.js b/src/components/base/form/form_checkbox/form_checkbox.stories.js
index ad2a7b72d0..6984e0751f 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.stories.js
+++ b/src/components/base/form/form_checkbox/form_checkbox.stories.js
@@ -1,4 +1,3 @@
-import BVueReadme from '../../../../vendor/bootstrap-vue/src/components/form-checkbox/README.md';
 import GlFormCheckbox from './form_checkbox.vue';
 import GlFormCheckboxGroup from './form_checkbox_group.vue';
 import readme from './form_checkbox.md';
@@ -10,7 +9,6 @@ const components = {
 
 const data = () => ({
   selected: ['checked-option', 'checked-disabled-option'],
-  indeterminate: true,
 });
 
 const template = `
@@ -45,6 +43,7 @@ const Template = (args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
+Default.args = { indeterminate: true };
 
 const Single = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -62,8 +61,6 @@ export default {
   title: 'base/form/form checkbox',
   component: GlFormCheckbox,
   parameters: {
-    bootstrapComponent: 'b-form-checkbox',
-    bootstrapDocs: BVueReadme,
     docs: {
       description: {
         component: readme,
diff --git a/src/components/base/form/form_checkbox/form_checkbox.vue b/src/components/base/form/form_checkbox/form_checkbox.vue
index ddab072937..5cb093aa76 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -1,58 +1,296 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { BFormCheckbox } from '../../../../vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox';
+import isEqual from 'lodash/isEqual';
+import isBoolean from 'lodash/isBoolean';
 
 export default {
   name: 'GlFormCheckbox',
-  components: {
-    BFormCheckbox,
+  inject: {
+    getGroup: {
+      // When we remove BFormCheckboxGroup from GlFormCheckboxGroup, we can rename
+      // the `getBvCheckGroup` provide to `getCheckGroup`.
+      from: 'getBvCheckGroup',
+      default: () => () => null,
+    },
   },
-  inheritAttrs: false,
   model: {
     prop: 'checked',
     event: 'input',
   },
   props: {
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
+     */
     id: {
       type: String,
       required: false,
       default: () => uniqueId(),
     },
+    /**
+     * The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model.
+     */
+    checked: {
+      type: [Array, Boolean, String],
+      required: false,
+      default: null,
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Adds the `required` attribute to the form control.
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
+    /**
+     * Sets the value of `aria-label` attribute on the rendered element.
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute.
+     */
+    ariaLabelledby: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Renders the checkbox in an indeterminate state. Syncable via the .sync modifier.
+     */
+    indeterminate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Value returned when this checkbox is checked.
+     */
+    value: {
+      type: [Array, Boolean, String],
+      required: false,
+      default: true,
+    },
+    /**
+     * Value returned when this checkbox is unchecked. Note not applicable when multiple checkboxes bound to the same v-model array.
+     */
+    uncheckedValue: {
+      type: [Array, Boolean, String],
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    const group = this.getGroup();
+    return {
+      localChecked: group ? group.checked : this.checked,
+    };
+  },
+  computed: {
+    computedLocalChecked: {
+      get() {
+        return this.isGroup ? this.group.localChecked : this.localChecked;
+      },
+      set(value) {
+        if (this.isGroup) {
+          this.group.localChecked = value;
+        } else {
+          this.localChecked = value;
+        }
+      },
+    },
+    group() {
+      return this.getGroup();
+    },
+    isGroup() {
+      // Is this check a child of check-group?
+      return Boolean(this.group);
+    },
+    computedState() {
+      // If not a boolean, ensure that value is null
+      return isBoolean(this.state) ? this.state : null;
+    },
+    stateClass() {
+      const state = this.computedState;
+      if (state === true) return 'is-valid';
+      return state === false ? 'is-invalid' : null;
+    },
+    computedAriaInvalid() {
+      return this.computedState === false ? 'true' : null;
+    },
+    isChecked() {
+      const { value, computedLocalChecked: checked } = this;
+      return Array.isArray(checked)
+        ? this.looseIndexOf(checked, value) > -1
+        : isEqual(checked, value);
+    },
+    isDisabled() {
+      // Child can be disabled while parent isn't, but is always disabled if group is
+      return this.isGroup ? this.group.disabled || this.disabled : this.disabled;
+    },
+    isRequired() {
+      // Required only works when a name is provided for the input(s)
+      // Child can only be required when parent is
+      // Groups will always have a name (either user supplied or auto generated)
+      return this.computedName && (this.isGroup ? this.group.required : this.required);
+    },
+    computedName() {
+      // Group name preferred over local name
+      return (this.isGroup ? this.group.groupName : this.name) || null;
+    },
+    computedAttrs() {
+      const { isDisabled: disabled, isRequired: required } = this;
+
+      return {
+        ...this.$attrs,
+        id: this.id,
+        name: this.computedName,
+        disabled,
+        required,
+        'aria-required': required || null,
+        'aria-invalid': this.computedAriaInvalid,
+        'aria-label': this.ariaLabel || null,
+        'aria-labelledby': this.ariaLabelledby || null,
+      };
+    },
+  },
+  watch: {
+    checked(...args) {
+      this.checkedWatcher(...args);
+    },
+    indeterminate(newValue, oldValue) {
+      if (!isEqual(newValue, oldValue)) {
+        this.setIndeterminate(newValue);
+      }
+    },
+    computedLocalChecked(...args) {
+      this.computedLocalCheckedWatcher(...args);
+    },
+  },
+  mounted() {
+    // Set initial indeterminate state
+    this.setIndeterminate(this.indeterminate);
   },
   methods: {
-    change($event) {
-      /**
-       * Emitted when selected value(s) is changed due to user interaction.
-       *
-       * @event change
-       */
-      this.$emit('change', $event);
-    },
-    input($event) {
-      /**
-       * Emitted when checked state is changed.
-       *
-       * @event input
-       */
-      this.$emit('input', $event);
+    checkedWatcher(newValue) {
+      if (!isEqual(newValue, this.computedLocalChecked)) {
+        this.computedLocalChecked = newValue;
+      }
+    },
+    computedLocalCheckedWatcher(newValue, oldValue) {
+      if (!isEqual(newValue, oldValue)) {
+        this.$emit('input', newValue);
+
+        const { input } = this.$refs;
+        if (input) {
+          this.$emit('update:indeterminate', input.indeterminate);
+        }
+      }
+    },
+    looseIndexOf(array, value) {
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < array.length; i++) {
+        if (isEqual(array[i], value)) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    handleChange({ target: { checked, indeterminate } }) {
+      const { value, uncheckedValue } = this;
+
+      // Update `computedLocalChecked`
+      let localChecked = this.computedLocalChecked;
+      if (Array.isArray(localChecked)) {
+        const index = this.looseIndexOf(localChecked, value);
+        if (checked && index < 0) {
+          // Add value to array
+          localChecked = localChecked.concat(value);
+        } else if (!checked && index > -1) {
+          // Remove value from array
+          localChecked = localChecked.slice(0, index).concat(localChecked.slice(index + 1));
+        }
+      } else {
+        localChecked = checked ? value : uncheckedValue;
+      }
+      this.computedLocalChecked = localChecked;
+
+      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
+      this.$nextTick(() => {
+        // Change is only emitted on user interaction
+        this.$emit('change', localChecked);
+
+        // If this is a child of a group, we emit a change event on it as well
+        if (this.isGroup) {
+          this.group.$emit('change', localChecked);
+        }
+
+        this.$emit('indeterminate', indeterminate);
+      });
+    },
+    setIndeterminate(state) {
+      let newValue = state;
+      // Indeterminate only supported in single checkbox mode
+      if (Array.isArray(this.computedLocalChecked)) {
+        newValue = false;
+      }
+
+      const { input } = this.$refs;
+      if (input) {
+        input.indeterminate = newValue;
+        // Emit update event to prop
+        this.$emit('update:indeterminate', newValue);
+      }
     },
   },
 };
 </script>
 
 <template>
-  <b-form-checkbox
-    v-bind="$attrs"
-    :id="id"
-    class="gl-form-checkbox"
-    @change="change"
-    @input="input"
-  >
-    <!-- @slot The checkbox content to display. -->
-    <slot></slot>
-    <p v-if="Boolean($scopedSlots.help)" class="help-text">
-      <!-- @slot The help text to display. -->
-      <slot name="help"></slot>
-    </p>
-  </b-form-checkbox>
+  <div class="gl-form-checkbox custom-checkbox custom-control">
+    <input
+      ref="input"
+      key="input"
+      v-bind="computedAttrs"
+      type="checkbox"
+      :value="value"
+      :checked="isChecked"
+      class="custom-control-input"
+      :class="stateClass"
+      @change="handleChange"
+    />
+    <label :for="id" class="custom-control-label">
+      <slot></slot>
+      <p v-if="Boolean($scopedSlots.help)" class="help-text">
+        <slot name="help"></slot>
+      </p>
+    </label>
+  </div>
 </template>
-- 
GitLab


From 41244769250d8221e934067079951e76f9f218d5 Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Thu, 22 May 2025 15:41:43 +0200
Subject: [PATCH 2/7] fix: use group computed state if available

---
 src/components/base/form/form_checkbox/form_checkbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/base/form/form_checkbox/form_checkbox.vue b/src/components/base/form/form_checkbox/form_checkbox.vue
index 5cb093aa76..7f468f5b16 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -134,7 +134,7 @@ export default {
       return Boolean(this.group);
     },
     computedState() {
-      // If not a boolean, ensure that value is null
+      if (this.isGroup) return this.group.computedState;
       return isBoolean(this.state) ? this.state : null;
     },
     stateClass() {
-- 
GitLab


From ad044b3e86a816e43f5f545d2dfe8fd31fc00947 Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Thu, 22 May 2025 15:42:48 +0200
Subject: [PATCH 3/7] chore: improve stateClass computed property

---
 src/components/base/form/form_checkbox/form_checkbox.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/base/form/form_checkbox/form_checkbox.vue b/src/components/base/form/form_checkbox/form_checkbox.vue
index 7f468f5b16..3bcf75c6e9 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -138,9 +138,9 @@ export default {
       return isBoolean(this.state) ? this.state : null;
     },
     stateClass() {
-      const state = this.computedState;
-      if (state === true) return 'is-valid';
-      return state === false ? 'is-invalid' : null;
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
     },
     computedAriaInvalid() {
       return this.computedState === false ? 'true' : null;
-- 
GitLab


From af5b5d872c2f21027e65ca8336166d94f48c6e4d Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Thu, 22 May 2025 15:55:12 +0200
Subject: [PATCH 4/7] chore: use Bootstrap vue's looseEqual

---
 .../base/form/form_checkbox/form_checkbox.vue        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/base/form/form_checkbox/form_checkbox.vue b/src/components/base/form/form_checkbox/form_checkbox.vue
index 3bcf75c6e9..39552f5714 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -1,7 +1,7 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import isEqual from 'lodash/isEqual';
 import isBoolean from 'lodash/isBoolean';
+import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 
 export default {
   name: 'GlFormCheckbox',
@@ -149,7 +149,7 @@ export default {
       const { value, computedLocalChecked: checked } = this;
       return Array.isArray(checked)
         ? this.looseIndexOf(checked, value) > -1
-        : isEqual(checked, value);
+        : looseEqual(checked, value);
     },
     isDisabled() {
       // Child can be disabled while parent isn't, but is always disabled if group is
@@ -186,7 +186,7 @@ export default {
       this.checkedWatcher(...args);
     },
     indeterminate(newValue, oldValue) {
-      if (!isEqual(newValue, oldValue)) {
+      if (!looseEqual(newValue, oldValue)) {
         this.setIndeterminate(newValue);
       }
     },
@@ -200,12 +200,12 @@ export default {
   },
   methods: {
     checkedWatcher(newValue) {
-      if (!isEqual(newValue, this.computedLocalChecked)) {
+      if (!looseEqual(newValue, this.computedLocalChecked)) {
         this.computedLocalChecked = newValue;
       }
     },
     computedLocalCheckedWatcher(newValue, oldValue) {
-      if (!isEqual(newValue, oldValue)) {
+      if (!looseEqual(newValue, oldValue)) {
         this.$emit('input', newValue);
 
         const { input } = this.$refs;
@@ -217,7 +217,7 @@ export default {
     looseIndexOf(array, value) {
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < array.length; i++) {
-        if (isEqual(array[i], value)) {
+        if (looseEqual(array[i], value)) {
           return i;
         }
       }
-- 
GitLab


From 2434ae0885a64d0dc846a9acc857a972105da23b Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Thu, 22 May 2025 16:00:36 +0200
Subject: [PATCH 5/7] Apply 1 suggestion(s) to 1 file(s)

Co-authored-by: Peter Hegman <phegman@gitlab.com>
---
 src/components/base/form/form_checkbox/form_checkbox.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/base/form/form_checkbox/form_checkbox.vue b/src/components/base/form/form_checkbox/form_checkbox.vue
index 39552f5714..96bc3eaaab 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -256,17 +256,14 @@ export default {
       });
     },
     setIndeterminate(state) {
-      let newValue = state;
       // Indeterminate only supported in single checkbox mode
-      if (Array.isArray(this.computedLocalChecked)) {
-        newValue = false;
-      }
+      const computedState = Array.isArray(this.computedLocalChecked) ? false : state
 
       const { input } = this.$refs;
       if (input) {
-        input.indeterminate = newValue;
+        input.indeterminate = computedState;
         // Emit update event to prop
-        this.$emit('update:indeterminate', newValue);
+        this.$emit('update:indeterminate', computedState);
       }
     },
   },
-- 
GitLab


From ae1173b5937cf2292bc04d033c3121d55359f805 Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Thu, 22 May 2025 16:07:23 +0200
Subject: [PATCH 6/7] chore: move value and checked to computedAttrs

---
 src/components/base/form/form_checkbox/form_checkbox.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/base/form/form_checkbox/form_checkbox.vue b/src/components/base/form/form_checkbox/form_checkbox.vue
index 96bc3eaaab..04f3ba1470 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -166,7 +166,7 @@ export default {
       return (this.isGroup ? this.group.groupName : this.name) || null;
     },
     computedAttrs() {
-      const { isDisabled: disabled, isRequired: required } = this;
+      const { isDisabled: disabled, isRequired: required, value, isChecked: checked } = this;
 
       return {
         ...this.$attrs,
@@ -174,6 +174,8 @@ export default {
         name: this.computedName,
         disabled,
         required,
+        value,
+        checked,
         'aria-required': required || null,
         'aria-invalid': this.computedAriaInvalid,
         'aria-label': this.ariaLabel || null,
@@ -277,8 +279,6 @@ export default {
       key="input"
       v-bind="computedAttrs"
       type="checkbox"
-      :value="value"
-      :checked="isChecked"
       class="custom-control-input"
       :class="stateClass"
       @change="handleChange"
-- 
GitLab


From 5d62408ce6e2743ed2272a1d438f021c90b340ba Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Thu, 22 May 2025 16:09:09 +0200
Subject: [PATCH 7/7] chore: fix prettier issue

---
 src/components/base/form/form_checkbox/form_checkbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/base/form/form_checkbox/form_checkbox.vue b/src/components/base/form/form_checkbox/form_checkbox.vue
index 04f3ba1470..a1fe10ff31 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -259,7 +259,7 @@ export default {
     },
     setIndeterminate(state) {
       // Indeterminate only supported in single checkbox mode
-      const computedState = Array.isArray(this.computedLocalChecked) ? false : state
+      const computedState = Array.isArray(this.computedLocalChecked) ? false : state;
 
       const { input } = this.$refs;
       if (input) {
-- 
GitLab