From c82990cfbefe4f4d4a5172a20e5a83e08a160ca8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 27 Jan 2022 07:20:56 -0800
Subject: [PATCH] docs(number-input): add empty value example

---
 docs/src/pages/components/NumberInput.svx         |  8 ++++++++
 .../framed/NumberInput/NumberInputEmpty.svelte    | 15 +++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte

diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index 923fab25..ea017fe3 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -19,6 +19,14 @@ components: ["NumberInput", "NumberInputSkeleton"]
 
 <NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
 
+### No value
+
+Set `allowEmpty` to `true` to allow for no value.
+
+Set `value` to `null` to denote "no value."
+
+<FileSource src="/framed/NumberInput/NumberInputEmpty" />
+
 ### Hidden label
 
 <NumberInput hideLabel label="Clusters" />
diff --git a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
new file mode 100644
index 00000000..cc76a330
--- /dev/null
+++ b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { NumberInput, Button } from "carbon-components-svelte";
+
+  let value = null;
+</script>
+
+<NumberInput allowEmpty bind:value />
+
+<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>
+</div>
+
+<strong>Value:</strong>
+{value}