diff --git a/src/components/base/form/form_checkbox/form_checkbox.md b/src/components/base/form/form_checkbox/form_checkbox.md
index 05fab872701f33798858a0ef57bac9fde40a5eb3..cc710b2776f6320ec5615466d3db841d331b0226 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 a2d0e9fb6042d97e261d85b094284bda792ee119..8a4a853cefe15b00ee07ac2f73bfce176ffab1c7 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 ad2a7b72d0a5f0119488dbd148cd8765e16137c9..6984e0751f6c05c4394bd0fc832af15b83f5cdbb 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 ddab07293733e570e2219acbecf2353aad308d73..a1fe10ff311825a87e9f053afea5e4ccc6a86874 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.vue
+++ b/src/components/base/form/form_checkbox/form_checkbox.vue
@@ -1,58 +1,293 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { BFormCheckbox } from '../../../../vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox';
+import isBoolean from 'lodash/isBoolean';
+import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 
 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 (this.isGroup) return this.group.computedState;
+      return isBoolean(this.state) ? this.state : null;
+    },
+    stateClass() {
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
+    },
+    computedAriaInvalid() {
+      return this.computedState === false ? 'true' : null;
+    },
+    isChecked() {
+      const { value, computedLocalChecked: checked } = this;
+      return Array.isArray(checked)
+        ? this.looseIndexOf(checked, value) > -1
+        : looseEqual(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, value, isChecked: checked } = this;
+
+      return {
+        ...this.$attrs,
+        id: this.id,
+        name: this.computedName,
+        disabled,
+        required,
+        value,
+        checked,
+        '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 (!looseEqual(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 (!looseEqual(newValue, this.computedLocalChecked)) {
+        this.computedLocalChecked = newValue;
+      }
+    },
+    computedLocalCheckedWatcher(newValue, oldValue) {
+      if (!looseEqual(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 (looseEqual(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) {
+      // Indeterminate only supported in single checkbox mode
+      const computedState = Array.isArray(this.computedLocalChecked) ? false : state;
+
+      const { input } = this.$refs;
+      if (input) {
+        input.indeterminate = computedState;
+        // Emit update event to prop
+        this.$emit('update:indeterminate', computedState);
+      }
     },
   },
 };
 </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"
+      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>