chore: Checkbox widget does not show an asterisk to indicate it's a required (#33814)

Fixes #33444

/ok-to-test tags="@tag.Anvil"<!-- This is an auto-generated comment:
Cypress test results -->
> [!WARNING]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9297202278>
> Commit: 895c87c82e1b55e4d604870c89512200c408ef41
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9297202278&attempt=1"
target="_blank">Click here!</a>
> It seems like **no tests ran** 😔. We are not able to recognize it,
please check workflow <a
href="https://github.com/appsmithorg/appsmith/actions/runs/9297202278"
target="_blank">here.</a>

<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>

app/client/packages/design-system/widgets/src/components/Checkbox/chromatic/Checkbox.chromatic.stories.tsx

@@ -28,9 +28,12 @@ export const LightMode: Story = {
           </DataAttrWrapper>
         </>
       ))}
-      <Checkbox defaultSelected isReadOnly isRequired>
+      <Checkbox defaultSelected isReadOnly>
         Readonly
       </Checkbox>
+      <Checkbox defaultSelected isRequired>
+        Is Required
+      </Checkbox>
     </StoryGrid>
   ),
 };

app/client/packages/design-system/widgets/src/components/Checkbox/src/Checkbox.tsx

@@ -25,7 +25,19 @@ const _Checkbox = (props: CheckboxProps, ref: HeadlessCheckboxRef) => {
         inlineLabelStyles["inline-label"],
       )}
     >
-      {Boolean(children) && <Text>{children}</Text>}
+      {Boolean(children) && (
+        <>
+          <Text>{children}</Text>
+          {Boolean(props.isRequired) && (
+            <Text
+              color="negative"
+              data-inline-label-necessity-indicator-icon=""
+            >
+              *
+            </Text>
+          )}
+        </>
+      )}
     </HeadlessCheckbox>
   );
 };

app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css

@@ -30,6 +30,11 @@
     --checkbox-border-color: var(--color-bd-neutral-hover);
   }
 
+  & [data-inline-label-necessity-indicator-icon] {
+    color: var(--color-fg-negative);
+    margin-inline-start: var(--inner-spacing-1);
+  }
+
   /**
   * ----------------------------------------------------------------------------
   * LABEL POSITION
@@ -86,10 +91,10 @@
   }
 
   /**
- * ----------------------------------------------------------------------------
+  * ----------------------------------------------------------------------------
- * ERROR ( INVALID )
+  * ERROR ( INVALID )
- *-----------------------------------------------------------------------------
+  *-----------------------------------------------------------------------------
- */
+  */
   &[data-invalid] [data-icon] {
     --checkbox-border-color: var(--color-bd-negative);
   }

app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.tsx

@@ -64,3 +64,11 @@ export const CustomIcon: Story = {
     </Flex>
   ),
 };
+
+export const IsRequired: Story = {
+  render: () => (
+    <Flex direction="column" gap="1rem" wrap="wrap">
+      <Checkbox isRequired>Required</Checkbox>
+    </Flex>
+  ),
+};

app/client/packages/design-system/widgets/src/styles/src/field.module.css

@@ -41,7 +41,7 @@
   */
   & [data-field-necessity-indicator-icon] {
     color: var(--color-fg-negative);
-    margin-left: var(--inner-spacing-1);
+    margin-inline-start: var(--inner-spacing-1);
   }
 
   /**