fix: adds required attribute on toggle

Jaspero · Dec 21, 2023 · 5666b7a · 5666b7a
1 parent 9f8f252
commit 5666b7a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/docs/docs/Form fields/toggle.md b/docs/docs/Form fields/toggle.md
@@ -13,6 +13,8 @@
 | size | | `'large'`|`'small'` | size of the toggle button |
 | checked | | `boolean`| is on by default |
 | disabled | | `boolean`| determines if toggle is disabled |
+| required | | `boolean`| if true toggle needs to be check to pass validity |
+| requiredValidationMessage | | `string` | validation message for when component does not satisfy required |
 
 
 ### Slots
@@ -21,7 +23,8 @@ This component does not have any slots.
 
 ### Methods
 
-This component does not have any methods.
+- `reportValidity` 
+  - triggers reportValidity
 
 ### Events
 

diff --git a/packages/lib/src/form-fields/toggle.wc.svelte b/packages/lib/src/form-fields/toggle.wc.svelte
@@ -23,15 +23,33 @@
   export let name: string = '';
   export let value: string = '';
   export let label: string | null = null;
+  export let required: boolean = false;
+  export let requiredValidationMessage: string = ''
   export let size: 'small' | 'large' = 'small';
   export let checked: boolean = false;
   export let disabled = false;
 
+  let checkboxEl;
+
   export const getValue = () => checked;
 
+  export const reportValidity = () => {
+    attachedInternals.reportValidity();
+  };
+
   const dispatch = createEventDispatcher();
   $: {
     attachedInternals.checkValidity();
+    if (checkboxEl) {
+      if (checkboxEl.validity.valueMissing) {
+        if (requiredValidationMessage) {
+          attachedInternals.setValidity(
+            { customError: true },
+            requiredValidationMessage
+          );
+        }
+      }
+    }
     dispatch('value', checked);
   }
 </script>
@@ -40,7 +58,7 @@
   <span class="label" style={`font-size: ${size == 'small' ? '12px' : '20px'}`}>{@html label}</span>
 {/if} 
 <label class={'switch ' + size}>
-  <input type="checkbox" {name} {disabled} bind:checked bind:value hidden />
+  <input type="checkbox" {name} {disabled} {required} bind:checked bind:value hidden bind:this={checkboxEl} />
   <span class="slider round" class:pointer={!disabled}></span>
 </label>