diff --git a/change/@fluentui-react-checkbox-efe8019d-5ed0-4eec-ae6d-674f97612c48.json b/change/@fluentui-react-checkbox-efe8019d-5ed0-4eec-ae6d-674f97612c48.json
new file mode 100644
index 00000000000000..1aed21fbc91525
--- /dev/null
+++ b/change/@fluentui-react-checkbox-efe8019d-5ed0-4eec-ae6d-674f97612c48.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add motion to Checkbox",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md b/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md
index 737435fddd1d9d..1f8159df3300f5 100644
--- a/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md
+++ b/packages/react-components/react-checkbox/library/etc/react-checkbox.api.md
@@ -42,6 +42,7 @@ export type CheckboxSlots = {
     label?: Slot<typeof Label>;
     input: NonNullable<Slot<'input'>>;
     indicator: Slot<'div', 'span'>;
+    checkmarkIcon: Slot<'svg', 'div' | 'span' | 'img'>;
 };
 
 // @public
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx
index 537c4d61bbad4d..3316c954c6c2d8 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.test.tsx
@@ -54,6 +54,13 @@ describe('Checkbox', () => {
     expect(renderedComponent.container).toMatchSnapshot();
   });
 
+  it('renders a custom checkmark icon', () => {
+    const renderedComponent = render(
+      <Checkbox checkmarkIcon={<span id="checkmark-icon" />} label="Custom checkmark icon" />,
+    );
+    expect(renderedComponent.container).toMatchSnapshot();
+  });
+
   it('respects id prop', () => {
     const renderedComponent = render(<Checkbox id="checkbox" label="Checkbox" />);
     expect(renderedComponent.getByRole('checkbox').id).toEqual('checkbox');
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts
index 96095670447b15..d645f994742daf 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.types.ts
@@ -31,6 +31,11 @@ export type CheckboxSlots = {
   // but changing the signature would be a breaking change
   // TODO: change the default value to 'span' in the next major
   indicator: Slot<'div', 'span'>;
+
+  /**
+   * The checkmark icon displayed inside the indicator when checked.
+   */
+  checkmarkIcon: Slot<'svg', 'span' | 'img'>;
 };
 
 /**
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index c5728b884831ac..38c36eeabfe3d2 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -1,5 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Checkbox renders a custom checkmark icon 1`] = `
+<div>
+  <span
+    class="fui-Checkbox"
+  >
+    <input
+      class="fui-Checkbox__input"
+      id="checkbox-rd"
+      type="checkbox"
+    />
+    <div
+      aria-hidden="true"
+      class="fui-Checkbox__indicator"
+    >
+      <svg
+        aria-hidden="true"
+        class="fui-Checkbox__checkmarkIcon"
+        fill="currentColor"
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+    <label
+      class="fui-Label fui-Checkbox__label"
+      for="checkbox-rd"
+    >
+      Custom checkmark icon
+    </label>
+  </span>
+</div>
+`;
+
 exports[`Checkbox renders a custom indicator 1`] = `
 <div>
   <span
@@ -14,9 +53,20 @@ exports[`Checkbox renders a custom indicator 1`] = `
       aria-hidden="true"
       class="fui-Checkbox__indicator"
     >
-      <span
-        id="indicator"
-      />
+      <svg
+        aria-hidden="true"
+        class="fui-Checkbox__checkmarkIcon"
+        fill="currentColor"
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <label
       class="fui-Label fui-Checkbox__label"
@@ -41,7 +91,22 @@ exports[`Checkbox renders a default state 1`] = `
     <div
       aria-hidden="true"
       class="fui-Checkbox__indicator"
-    />
+    >
+      <svg
+        aria-hidden="true"
+        class="fui-Checkbox__checkmarkIcon"
+        fill="currentColor"
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
   </span>
 </div>
 `;
@@ -63,7 +128,7 @@ exports[`Checkbox renders checked 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Checkbox__checkmarkIcon"
         fill="currentColor"
         height="12"
         viewBox="0 0 12 12"
@@ -100,20 +165,9 @@ exports[`Checkbox renders mixed 1`] = `
       aria-hidden="true"
       class="fui-Checkbox__indicator"
     >
-      <svg
-        aria-hidden="true"
-        class=""
-        fill="currentColor"
-        height="12"
-        viewBox="0 0 12 12"
-        width="12"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2 4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        class="fui-Checkbox__checkmarkIcon"
+      />
     </div>
     <label
       class="fui-Label fui-Checkbox__label"
@@ -138,7 +192,22 @@ exports[`Checkbox renders with a label 1`] = `
     <div
       aria-hidden="true"
       class="fui-Checkbox__indicator"
-    />
+    >
+      <svg
+        aria-hidden="true"
+        class="fui-Checkbox__checkmarkIcon"
+        fill="currentColor"
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
     <label
       class="fui-Label fui-Checkbox__label"
       for="checkbox-r9"
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx b/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx
index 768f3913aceb15..94a3099ac5e92f 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/renderCheckbox.tsx
@@ -12,7 +12,11 @@ export const renderCheckbox_unstable = (state: CheckboxState): JSXElement => {
     <state.root>
       <state.input />
       {state.labelPosition === 'before' && state.label && <state.label />}
-      {state.indicator && <state.indicator />}
+      {state.indicator && state.checkmarkIcon && (
+        <state.indicator>
+          <state.checkmarkIcon />
+        </state.indicator>
+      )}
       {state.labelPosition === 'after' && state.label && <state.label />}
     </state.root>
   );
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
index d4fb66a594f129..cda92cc3018e94 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
@@ -12,13 +12,7 @@ import {
   slot,
 } from '@fluentui/react-utilities';
 import { CheckboxProps, CheckboxState } from './Checkbox.types';
-import {
-  Checkmark12Filled,
-  Checkmark16Filled,
-  Square12Filled,
-  Square16Filled,
-  CircleFilled,
-} from '@fluentui/react-icons';
+import { Checkmark12Filled, Checkmark16Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
 import { useFocusWithin } from '@fluentui/react-tabster';
 
@@ -54,15 +48,10 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
   const mixed = checked === 'mixed';
   const id = useId('checkbox-', nativeProps.primary.id);
 
-  let checkmarkIcon;
-  if (mixed) {
-    if (shape === 'circular') {
-      checkmarkIcon = <CircleFilled />;
-    } else {
-      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;
-    }
-  } else if (checked) {
-    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;
+  let checkmarkIcon: React.ElementType = 'span';
+
+  if (!mixed) {
+    checkmarkIcon = size === 'large' ? Checkmark16Filled : Checkmark12Filled;
   }
 
   const state: CheckboxState = {
@@ -75,6 +64,7 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
       root: 'span',
       input: 'input',
       indicator: 'div',
+      checkmarkIcon,
       label: Label,
     },
     root: slot.always(props.root, {
@@ -107,10 +97,13 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
       renderByDefault: true,
       defaultProps: {
         'aria-hidden': true,
-        children: checkmarkIcon,
       },
       elementType: 'div',
     }),
+    checkmarkIcon: slot.optional(props.checkmarkIcon, {
+      renderByDefault: true,
+      elementType: 'svg',
+    }),
   };
 
   state.input.onChange = useEventCallback(ev => {
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts
index 5979d4621fe0d9..773a6911f0c2de 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckboxStyles.styles.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { CheckboxSlots, CheckboxState } from './Checkbox.types';
@@ -11,6 +11,7 @@ export const checkboxClassNames: SlotClassNames<CheckboxSlots> = {
   label: 'fui-Checkbox__label',
   input: 'fui-Checkbox__input',
   indicator: 'fui-Checkbox__indicator',
+  checkmarkIcon: 'fui-Checkbox__checkmarkIcon',
 };
 
 // CSS variables used internally in Checkbox's styles
@@ -18,6 +19,9 @@ const vars = {
   indicatorColor: '--fui-Checkbox__indicator--color',
   indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
   indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',
+  indicatorTransform: '--fui-Checkbox__indicator--scale',
+  checkmarkIconOpacity: '--fui-Checkbox__checkmarkIcon--opacity',
+  checkmarkIconTransform: '--fui-Checkbox__checkmarkIcon--transform',
 } as const;
 
 // The indicator size is used by the indicator and label styles
@@ -34,6 +38,15 @@ const useRootBaseClassName = makeResetStyles({
   ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),
 });
 
+const disabledStyles: GriffelStyle = {
+  cursor: 'default',
+
+  color: tokens.colorNeutralForegroundDisabled,
+  [vars.indicatorBackgroundColor]: tokens.colorNeutralForegroundDisabled,
+  [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,
+  [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,
+};
+
 const useRootStyles = makeStyles({
   unchecked: {
     ':hover': {
@@ -50,7 +63,6 @@ const useRootStyles = makeStyles({
   checked: {
     color: tokens.colorNeutralForeground1,
     [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,
-    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,
     [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,
 
     ':hover': {
@@ -81,12 +93,9 @@ const useRootStyles = makeStyles({
   },
 
   disabled: {
-    cursor: 'default',
-
-    color: tokens.colorNeutralForegroundDisabled,
-    [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,
-    [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,
-
+    ...disabledStyles,
+    ':hover': disabledStyles,
+    ':active': disabledStyles,
     '@media (forced-colors: active)': {
       color: 'GrayText',
       [vars.indicatorColor]: 'GrayText',
@@ -94,6 +103,54 @@ const useRootStyles = makeStyles({
   },
 });
 
+const useMotionColorStyles = makeStyles({
+  default: {
+    ':active': {
+      [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,
+      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,
+    },
+  },
+
+  unchecked: {},
+
+  checked: {
+    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,
+  },
+
+  mixed: {
+    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,
+    [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,
+  },
+});
+
+const useMotionScaleStyles = makeStyles({
+  default: {
+    ':active': {
+      [vars.indicatorTransform]: 'scale(0.66) translateZ(0)',
+      [vars.checkmarkIconOpacity]: '1',
+      [vars.checkmarkIconTransform]: 'scale(0.66) translateZ(0)',
+    },
+  },
+
+  unchecked: {
+    [vars.indicatorTransform]: 'scale(0) translateZ(0)',
+    [vars.checkmarkIconOpacity]: '0',
+    [vars.checkmarkIconTransform]: 'scale(0) translateZ(0)',
+  },
+
+  checked: {
+    [vars.indicatorTransform]: 'scale(1) translateZ(0)',
+    [vars.checkmarkIconOpacity]: '1',
+    [vars.checkmarkIconTransform]: 'scale(1) translateZ(0)',
+  },
+
+  mixed: {
+    [vars.indicatorTransform]: 'scale(0.57) translateZ(0)',
+    [vars.checkmarkIconOpacity]: '0',
+    [vars.checkmarkIconTransform]: 'scale(0) translateZ(0)',
+  },
+});
+
 const useInputBaseClassName = makeResetStyles({
   boxSizing: 'border-box',
   cursor: 'inherit',
@@ -129,30 +186,68 @@ const useIndicatorBaseClassName = makeResetStyles({
   alignItems: 'center',
   justifyContent: 'center',
   overflow: 'hidden',
+  position: 'relative',
 
-  color: `var(${vars.indicatorColor})`,
-  backgroundColor: `var(${vars.indicatorBackgroundColor})`,
   borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,
-  borderStyle: 'solid',
   borderWidth: tokens.strokeWidthThin,
+  borderStyle: 'solid',
   borderRadius: tokens.borderRadiusSmall,
   margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,
-  fill: 'currentColor',
   pointerEvents: 'none',
 
+  transitionProperty: 'border-color, color',
+  transitionDuration: tokens.durationFaster,
+  transitionTimingFunction: tokens.curveEasyEase,
+
+  color: `var(${vars.indicatorColor})`,
   fontSize: '12px',
   height: indicatorSizeMedium,
   width: indicatorSizeMedium,
+
+  '&::after': {
+    position: 'absolute',
+    inset: 0,
+    zIndex: tokens.zIndexBackground,
+    content: "''",
+    backgroundColor: `var(${vars.indicatorBackgroundColor})`,
+    transform: `var(${vars.indicatorTransform})`,
+    fill: 'currentColor',
+    transitionProperty: 'transform, background-color, fill',
+    transitionDuration: tokens.durationFaster,
+    transitionTimingFunction: tokens.curveEasyEase,
+  },
 });
 
 const useIndicatorStyles = makeStyles({
+  mixedIndicator: {
+    '::after': {
+      borderRadius: tokens.borderRadiusSmall,
+    },
+  },
+
   large: {
     fontSize: '16px',
     height: indicatorSizeLarge,
     width: indicatorSizeLarge,
   },
 
-  circular: { borderRadius: tokens.borderRadiusCircular },
+  circular: {
+    borderRadius: tokens.borderRadiusCircular,
+
+    '::after': {
+      borderRadius: 'inherit',
+    },
+  },
+});
+
+const useCheckmarkStyles = makeResetStyles({
+  position: 'relative',
+  zIndex: tokens.zIndexContent,
+  opacity: `var(${vars.checkmarkIconOpacity})`,
+  transform: `var(${vars.checkmarkIconTransform})`,
+  transitionProperty: 'transform, opacity',
+  transitionDuration: tokens.durationNormal,
+  transitionTimingFunction: tokens.curveDecelerateMin,
 });
 
 // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
@@ -193,16 +288,21 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState
 
   const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
+  const motionColorStyles = useMotionColorStyles();
+  const motionScaleStyles = useMotionScaleStyles();
+
   state.root.className = mergeClasses(
     checkboxClassNames.root,
     rootBaseClassName,
-    disabled
-      ? rootStyles.disabled
-      : checked === 'mixed'
-      ? rootStyles.mixed
-      : checked
-      ? rootStyles.checked
-      : rootStyles.unchecked,
+    checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked,
+    checked === 'mixed' ? motionScaleStyles.mixed : checked ? motionScaleStyles.checked : motionScaleStyles.unchecked,
+    !disabled &&
+      (checked === 'mixed'
+        ? motionColorStyles.mixed
+        : checked
+        ? motionColorStyles.checked
+        : motionColorStyles.unchecked),
+    disabled && rootStyles.disabled,
     state.root.className,
   );
 
@@ -223,6 +323,7 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState
       checkboxClassNames.indicator,
       indicatorBaseClassName,
       size === 'large' && indicatorStyles.large,
+      checked === 'mixed' && indicatorStyles.mixedIndicator,
       shape === 'circular' && indicatorStyles.circular,
       state.indicator.className,
     );
@@ -239,5 +340,14 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState
     );
   }
 
+  const checkmarkStyles = useCheckmarkStyles();
+  if (state.checkmarkIcon) {
+    state.checkmarkIcon.className = mergeClasses(
+      checkboxClassNames.checkmarkIcon,
+      checkmarkStyles,
+      state.checkmarkIcon.className,
+    );
+  }
+
   return state;
 };
diff --git a/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxDisabled.stories.tsx b/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxDisabled.stories.tsx
index 4655583922c239..73e65039de28cf 100644
--- a/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxDisabled.stories.tsx
+++ b/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxDisabled.stories.tsx
@@ -1,14 +1,47 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { Checkbox } from '@fluentui/react-components';
+import { Checkbox, makeStyles, tokens } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+  },
+});
+
+export const Disabled = (): JSXElement => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <div>
+        <Checkbox disabled label="Disabled" />
+        <Checkbox disabled label="Disabled checked" checked />
+        <Checkbox disabled label="Disabled mixed" checked="mixed" />
+      </div>
+
+      <div>
+        <Checkbox shape="circular" disabled label="Disabled" />
+        <Checkbox shape="circular" disabled label="Disabled checked" checked />
+        <Checkbox shape="circular" disabled label="Disabled mixed" checked="mixed" />
+      </div>
+
+      <div>
+        <Checkbox size="large" disabled label="Disabled" />
+        <Checkbox size="large" disabled label="Disabled checked" checked />
+        <Checkbox size="large" disabled label="Disabled mixed" checked="mixed" />
+      </div>
+
+      <div>
+        <Checkbox size="large" shape="circular" disabled label="Disabled" />
+        <Checkbox size="large" shape="circular" disabled label="Disabled checked" checked />
+        <Checkbox size="large" shape="circular" disabled label="Disabled mixed" checked="mixed" />
+      </div>
+    </div>
+  );
+};
 
-export const Disabled = (): JSXElement => (
-  <>
-    <Checkbox disabled label="Disabled" />
-    <Checkbox disabled label="Disabled checked" checked />
-    <Checkbox disabled label="Disabled mixed" checked="mixed" />
-  </>
-);
 Disabled.parameters = {
   docs: {
     description: {
diff --git a/packages/react-components/react-list/library/src/components/List/List.cy.tsx b/packages/react-components/react-list/library/src/components/List/List.cy.tsx
index fd1701121f069f..f0d6fe6fedaa52 100644
--- a/packages/react-components/react-list/library/src/components/List/List.cy.tsx
+++ b/packages/react-components/react-list/library/src/components/List/List.cy.tsx
@@ -173,9 +173,17 @@ const validateSetOfListItems = (expectedStates: Array<boolean>) =>
     listItem.should('have.attr', 'aria-selected', checked.toString());
 
     cy.log('Validate checkbox state on item', index + 1);
-    cy.get(`[data-test="list-item-${index + 1}"] .fui-Checkbox__indicator > svg`).should(
-      checked ? 'exist' : 'not.exist',
-    );
+    // Checkbox now keeps the checkmark SVG in the DOM for motion/animation.
+    // Validate visual state by checking computed opacity (0 -> unchecked, 1 -> checked)
+    cy.get(`[data-test="list-item-${index + 1}"] .fui-Checkbox__indicator > svg`).should($svg => {
+      // Read computed opacity and coerce to number for robust comparison
+      const opacity = Number(window.getComputedStyle($svg[0]).opacity);
+      if (checked) {
+        expect(opacity).to.be.greaterThan(0.5);
+      } else {
+        expect(opacity).to.be.lessThan(0.5);
+      }
+    });
 
     cy.log('Validate that the item is present/not present in the parent state (or stringified state)');
     cy.get(`[data-test="selected-items"]`).should(checked ? 'contain' : 'not.contain', `list-item-${index + 1}`);