Merge 986d81c577 into 65a8bbf1f9

docs/src/pages/components/NumberInput.svx

@@ -27,12 +27,16 @@ See [#no-value](#no-value) to allow for an empty value.
 
 <NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
 
-## No value
+## No value and error states
 
-Set `allowEmpty` to `true` to allow for no value.
+Set `required` to `false` to allow for no value.
 
 Set `value` to `null` to denote "no value."
 
+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" />
 
 ## Hidden label

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

@@ -2,14 +2,40 @@
   import { NumberInput, Button } from "carbon-components-svelte";
 
   let value = null;
+  let invalid = false;
+  let min;
+  let max;
+  let required = false;
 </script>
 
-<NumberInput allowEmpty bind:value />
+<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>
 
-<strong>Value:</strong>
-{value}
+<p>
+  <strong>Value:</strong>
+  {value}
+</p>
+<p>
+  <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" />