Changing how the the input works. The value

is now binded to the input. Required, min, max
and value are reative to error states.

docs/src/pages/components/NumberInput.svx

@@ -33,7 +33,9 @@ Set `required` to `false` to allow for no value.
 
 Set `value` to `null` to denote "no value."
 
-Set `invalid` to `true` to set the input in `invalid` state.
+Set `invalid` to `true` to force a `error` state for the input.
+
+The input is reactive to `min`, `max` and `required` attributes.
 
 <FileSource src="/framed/NumberInput/NumberInputEmpty" />
 

docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte

@@ -3,14 +3,24 @@
 
   let value = null;
   let invalid = false;
+  let min;
+  let max;
+  let required = false;
 </script>
 
-<NumberInput required="{false}" bind:value="{value}" invalid="{invalid}" />
+<NumberInput
+  required="{required}"
+  bind:value="{value}"
+  max="{max}"
+  min="{min}"
+  invalid="{invalid}"
+/>
 
 <div style="margin: var(--cds-layout-01) 0">
   <Button on:click="{() => (value = null)}">Set to null</Button>
   <Button on:click="{() => (value = 0)}">Set to 0</Button>
   <Button on:click="{() => (invalid = !invalid)}">Toggle invalid</Button>
+  <Button on:click="{() => (required = !required)}">Toggle required</Button>
 </div>
 
 <p>
@@ -21,3 +31,11 @@
   <strong>Invalid:</strong>
   {invalid}
 </p>
+
+<p>
+  <strong>Required:</strong>
+  {required}
+</p>
+
+<NumberInput required="{false}" bind:value="{max}" label="Max" />
+<NumberInput required="{false}" bind:value="{min}" label="Min" />