add name to form components

src/components/NumberInput/NumberInput.Story.svelte

@@ -14,7 +14,8 @@
   {:else}
     <NumberInput
       {...$$props}
-      id="slider"
+      id="number-input-id"
+      name="number-input-id"
       bind:value
       on:change={({ detail }) => {
         console.log('on:change', detail);

src/components/NumberInput/NumberInput.stories.js

@@ -6,7 +6,8 @@ export default { title: 'NumberInput', decorators: [withKnobs] };
 export const Default = () => ({
   Component,
   props: {
-    id: 'number-input',
+    id: text('NumberInput id', 'number-input-id'),
+    name: text('NumberInput name', 'number-input-name'),
     label: text('Label (label)', 'Number Input label'),
     hideLabel: boolean('Hide label (hideLabel)', false),
     min: number('Minimum value (min)', 0),

src/components/NumberInput/NumberInput.svelte

@@ -8,6 +8,7 @@
   export let hideLabel = false;
   export let iconDescription = '';
   export let id = Math.random();
+  export let name = Math.random();
   export let invalid = false;
   export let invalidText = 'Provide invalidText';
   export let mobile = false;
@@ -96,6 +97,7 @@
           }}
           {disabled}
           {id}
+          {name}
           {max}
           {min}
           {step}