diff --git a/src/components/CvCheckbox/CvCheckbox.stories.js b/src/components/CvCheckbox/CvCheckbox.stories.js
index 95778f133..17f637138 100644
--- a/src/components/CvCheckbox/CvCheckbox.stories.js
+++ b/src/components/CvCheckbox/CvCheckbox.stories.js
@@ -4,7 +4,7 @@ import {
storyParametersObject,
} from '../../global/storybook-utils';
-import { CvCheckbox } from '.';
+import { CvCheckbox, CvCheckboxSkeleton } from '.';
import { action } from '@storybook/addon-actions';
import { props as propsCvCheck } from '../../use/cvCheck';
import { ref } from 'vue';
@@ -109,3 +109,15 @@ vModel.parameters = storyParametersObject(
templateVModel,
vModel.args
);
+
+const templateSkeleton = ``;
+
+const TemplateSkeleton = args => {
+ return {
+ components: { CvCheckboxSkeleton },
+ setup: () => {},
+ template: templateSkeleton,
+ };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});
diff --git a/src/components/CvCheckbox/CvCheckboxSkeleton.vue b/src/components/CvCheckbox/CvCheckboxSkeleton.vue
new file mode 100644
index 000000000..a2182d205
--- /dev/null
+++ b/src/components/CvCheckbox/CvCheckboxSkeleton.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/src/components/CvCheckbox/__tests__/CvCheckboxSkeleton.spec.js b/src/components/CvCheckbox/__tests__/CvCheckboxSkeleton.spec.js
new file mode 100644
index 000000000..7337d1ba6
--- /dev/null
+++ b/src/components/CvCheckbox/__tests__/CvCheckboxSkeleton.spec.js
@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import { carbonPrefix } from '../../../global/settings';
+import CvCheckboxSkeleton from '../CvCheckboxSkeleton.vue';
+
+describe('CvCheckboxSkeleton', () => {
+ it('renders checkbox skeleton', async () => {
+ const wrapper = shallowMount(CvCheckboxSkeleton);
+
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('renders checkbox skeleton with required visual elements', () => {
+ const wrapper = shallowMount(CvCheckboxSkeleton);
+
+ const skeletonWrapper = wrapper.find('.cv-checkbox');
+ const skeletonLabel = skeletonWrapper.find(
+ `.${carbonPrefix}--checkbox-label`
+ );
+ const skeletonText = skeletonWrapper.find(
+ `.${carbonPrefix}--checkbox-label-text`
+ );
+ const expectedSkeletonClass = `${carbonPrefix}--skeleton`;
+
+ expect(skeletonLabel.classes()).toContain(expectedSkeletonClass);
+ expect(skeletonText.classes()).toContain(expectedSkeletonClass);
+ });
+});
diff --git a/src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap b/src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap
new file mode 100644
index 000000000..362e1fc7f
--- /dev/null
+++ b/src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvCheckboxSkeleton renders checkbox skeleton 1`] = `
`;
diff --git a/src/components/CvCheckbox/index.js b/src/components/CvCheckbox/index.js
index 9403e8234..6f26118fa 100644
--- a/src/components/CvCheckbox/index.js
+++ b/src/components/CvCheckbox/index.js
@@ -1,3 +1,4 @@
import CvCheckbox from './CvCheckbox.vue';
-export { CvCheckbox };
+import CvCheckboxSkeleton from './CvCheckboxSkeleton.vue';
+export { CvCheckbox, CvCheckboxSkeleton };
export default CvCheckbox;