docs: Checkbox, Tabs, NumberInput (#1045)

* add `Checkbox` reactive example for `bind:checked` (#967)

* update `Checkbox` reactive example for `bind:group` to demo two-way binding

* simplify `Tabs` reactive example

* add `NumberInput` "No value" example

docs/src/pages/components/Checkbox.svx

@@ -1,5 +1,5 @@
 <script>
-  import { Checkbox } from "carbon-components-svelte";
+  import { Checkbox, InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -23,9 +23,21 @@
 
 <Checkbox labelText="Label text" disabled />
 
-### Multiple
+### Reactive example (bind:checked)
 
-Bind a selection [group](https://svelte.dev/tutorial/group-inputs) to multiple checkboxes.
+The `checked` prop supports two-way binding.
+
+<FileSource src="/framed/Checkbox/CheckboxReactive" />
+
+### Reactive example (bind:group)
+
+An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs]([group](https://svelte.dev/tutorial/group-inputs)).
+
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
+  </div>
+</InlineNotification>
 
 <FileSource src="/framed/Checkbox/MultipleCheckboxes" />
 

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" />