added form name elements, added value as optional, components can be

used with form actions

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mpiorowski/svelte-init",
     "description": "Low-overhead Svelte UI library",
-    "version": "2.0.8",
+    "version": "2.1.0",
     "keywords": [
         "svelte",
         "sveltekit",

src/lib/components/form/checkbox.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     export let checked: boolean;
+    export let name = '';
     export let onChange: (() => void) | undefined = undefined;
 </script>
 
 <label>
-    <input bind:checked on:change={onChange} type="checkbox" />
+    <input bind:checked {name} on:change={onChange} type="checkbox" />
     <slot />
 </label>
 

src/lib/components/form/chexkboxGroup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    export let group: boolean | string | string[];
+    export let group: boolean | string | string[] | undefined = undefined;
+    export let name = '';
     export let values: {
         value: string | boolean;
         label: string;
@@ -10,13 +11,13 @@
 {#each values as value}
     {#if type === 'checkbox'}
         <label class="group">
-            <input bind:group value={value.value} type="checkbox" />
+            <input bind:group {name} value={value.value} type="checkbox" />
             {value.label}
         </label>
     {/if}
     {#if type === 'radio'}
         <label class="group">
-            <input bind:group value={value.value} type="radio" />
+            <input bind:group {name} value={value.value} type="radio" />
             {value.label}
         </label>
     {/if}

src/lib/components/form/input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    export let value: unknown;
     export let label: string;
+    export let value: unknown = undefined;
     export let name = '';
     export let error = '';
     export let type:

src/lib/components/form/inputNumber.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    export let value: number | null;
     export let label: string;
+    export let value: unknown = undefined;
     export let name = '';
     export let error = '';
     export let required = false;

src/lib/components/form/inputSimple.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     export let placeholder: string;
-    export let value: unknown;
+    export let value: unknown = undefined;
+    export let name = '';
     export let type:
         | 'text'
         | 'number'
@@ -24,6 +25,7 @@
     placeholder={error || placeholder}
     class:error
     class="input"
+    {name}
     {disabled}
 />
 

src/lib/components/form/select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     export let label: string;
-    export let value: unknown;
+    export let value: unknown = undefined;
+    export let name = '';
     export let error = '';
     export let required = false;
     export let disabled = false;
@@ -9,7 +10,7 @@
 <label>
     {label}
     {#if required}<span class="text-error">*</span>{/if}
-    <select class="input" {disabled} bind:value class:error>
+    <select class="input" {name} {disabled} bind:value class:error>
         <slot />
     </select>
     <p class="text-error">

src/lib/components/form/textarea.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     export let label: string;
-    export let value: unknown;
+    export let value: unknown = undefined;
+    export let name = '';
     export let error = '';
     export let placeholder = '';
     export let required = false;
@@ -11,7 +12,7 @@
 <label>
     {label}
     {#if required}<span class="text-error">*</span>{/if}
-    <textarea class="input" bind:value {rows} {disabled} {placeholder} class:error />
+    <textarea class="input" {name} bind:value {rows} {disabled} {placeholder} class:error />
     <p class="text-error">
         {#if error}
             {error}