diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index c5ccc4b471..05acecd832 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -170,7 +170,7 @@ export const MultiStateCheckbox = React.memo(
         const checkboxProps = mergeProps(
             {
                 id: props.id + '_checkbox',
-                className: classNames(props.className),
+                className: cx('checkbox'),
                 style: sx('checkbox', { selectedOption }),
                 tabIndex: props.tabIndex,
                 onFocus: onFocus,
diff --git a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
index a1bcb48f31..54c409a008 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
@@ -6,7 +6,14 @@ const classes = {
         classNames('p-checkbox-icon p-c', {
             [`${icon}`]: true
         }),
-    root: ({ props }) => classNames('p-multistatecheckbox p-checkbox p-component', props.classNames)
+    root: ({ props }) =>
+        classNames('p-multistatecheckbox p-checkbox p-component', props.classNames, {
+            'p-variant-filled': props.variant === 'filled'
+        }),
+    checkbox: ({ props }) =>
+        classNames(props.className, {
+            'p-invalid': props.invalid
+        })
 };
 
 const inlineStyles = {
@@ -34,7 +41,9 @@ export const MultiStateCheckboxBase = ComponentBase.extend({
         tooltip: null,
         tooltipOptions: null,
         value: null,
-        children: undefined
+        children: undefined,
+        invalid: false,
+        variant: null
     },
     css: {
         classes,