fix(ui): add invalid state styling to Checkbox component

Signed-off-by: Deepthi Ajith <deepthi.ajith@infosys.com>

packages/ui/src/components/Checkbox/Checkbox.module.css

@@ -68,6 +68,19 @@
       color: var(--bui-fg-primary);
     }
 
+    .bui-Checkbox[data-invalid] & {
+      box-shadow: inset 0 0 0 1px var(--bui-border-danger);
+    }
+
+    .bui-Checkbox[data-invalid][data-selected] & {
+      background-color: var(--bui-border-danger);
+      box-shadow: none;
+    }
+
+    .bui-Checkbox[data-invalid][data-indeterminate] & {
+      box-shadow: inset 0 0 0 1px var(--bui-border-danger);
+    }
+
     @media (prefers-reduced-motion: reduce) {
       & {
         transition: none;

packages/ui/src/components/Checkbox/Checkbox.stories.tsx

@@ -62,6 +62,12 @@ export const WithLongText = Default.extend({
   ],
 });
 
+export const Invalid = Default.extend({
+  args: {
+    isInvalid: true,
+  },
+});
+
 export const AllVariants = meta.story({
   ...Default.input,
   render: () => (
@@ -76,6 +82,13 @@ export const AllVariants = meta.story({
       <Checkbox isIndeterminate isDisabled>
         Indeterminate & Disabled
       </Checkbox>
+      <Checkbox isInvalid>Invalid</Checkbox>
+      <Checkbox isInvalid isSelected>
+        Invalid & Checked
+      </Checkbox>
+      <Checkbox isInvalid isIndeterminate>
+        Invalid & Indeterminate
+      </Checkbox>
     </Flex>
   ),
 });