fix: adds label to toggle

Jaspero · Dec 21, 2023 · 9f8f252 · 9f8f252
1 parent 4dd5dec
commit 9f8f252
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/docs/docs/Form fields/toggle.md b/docs/docs/Form fields/toggle.md
@@ -9,6 +9,7 @@
 | **Name** | **Required** | **Type** | **Description** |
 | :----: | :----: | :----: | :---: |
 | name | ✓ | `string` |  name of the form control |
+| label |  | `string` |  text above the toggle |
 | size | | `'large'`|`'small'` | size of the toggle button |
 | checked | | `boolean`| is on by default |
 | disabled | | `boolean`| determines if toggle is disabled |

diff --git a/packages/lib/src/form-fields/toggle.wc.svelte b/packages/lib/src/form-fields/toggle.wc.svelte
@@ -22,6 +22,7 @@
 
   export let name: string = '';
   export let value: string = '';
+  export let label: string | null = null;
   export let size: 'small' | 'large' = 'small';
   export let checked: boolean = false;
   export let disabled = false;
@@ -35,6 +36,9 @@
   }
 </script>
 
+{#if label}
+  <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 />
   <span class="slider round" class:pointer={!disabled}></span>
@@ -50,6 +54,11 @@
     cursor: pointer;
   }
 
+  .label {
+    display: block;
+    margin-bottom: 4px;
+  }
+
   .large {
     width: 60px;
     height: 34px;