Merge pull request #500 from saasquatch/fix-checkbox

fix issues with checkbox field

Author: 00salmon

packages/mint-components/.changeset/gold-items-start.md

@@ -0,0 +1,5 @@
+---
+"@saasquatch/mint-components": patch
+---
+
+Fixes issue with the checkbox not properly being set as required in registration forms

packages/mint-components/src/components.d.ts

@@ -456,7 +456,7 @@ export namespace Components {
          */
         "checkboxLabelLink"?: string;
         /**
-          * @uiName Checkbox label link lext
+          * @uiName Checkbox label link text
          */
         "checkboxLabelLinkText"?: string;
         /**
@@ -8556,7 +8556,7 @@ declare namespace LocalJSX {
          */
         "checkboxLabelLink"?: string;
         /**
-          * @uiName Checkbox label link lext
+          * @uiName Checkbox label link text
          */
         "checkboxLabelLinkText"?: string;
         /**

packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx

@@ -91,7 +91,7 @@ export function CheckboxFieldView(props: CheckboxFieldViewProps) {
           e.target.value = e.target.checked;
           callbacks.setChecked(e.target.value);
         }}
-        {...(!content.checkboxOptional ? { required: false } : [])}
+        {...(!content.checkboxOptional ? { required: true } : [])}
         disabled={
           states.registrationFormState?.loading ||
           states.registrationFormState?.disabled

packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx

@@ -19,7 +19,7 @@ import { useCheckboxField } from "./useCheckboxField";
  */
 @Component({
   tag: "sqm-checkbox-field",
-  shadow: true,
+  shadow: false,
 })
 export class CheckboxField {
   @State()
@@ -46,7 +46,7 @@ export class CheckboxField {
   @Prop() checkboxLabelLink?: string = "https://example.com";
 
   /**
-   * @uiName Checkbox label link lext
+   * @uiName Checkbox label link text
    */
   @Prop() checkboxLabelLinkText?: string = "Terms and Conditions";