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

docs/src/pages/framed/Checkbox/CheckboxReactive.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { Checkbox, Button } from "carbon-components-svelte";
+
+  let checked = false;
+</script>
+
+<Checkbox labelText="Label text" bind:checked />
+
+<div style="margin: var(--cds-layout-01) 0">
+  <Button on:click="{() => (checked = !checked)}">Toggle</Button>
+</div>
+
+<strong>checked:</strong>
+{checked}

docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte

@@ -1,15 +1,17 @@
 <script>
-  import { Checkbox } from "carbon-components-svelte";
+  import { Checkbox, Button } from "carbon-components-svelte";
 
-  let options = ["Apple", "Banana", "Coconut"];
-  let selection = options.slice(0, 2);
+  let values = ["Apple", "Banana", "Coconut"];
+  let group = values.slice(0, 2);
 </script>
 
-{#each options as option}
-  <Checkbox bind:group="{selection}" labelText="{option}" value="{option}" />
+{#each values as value}
+  <Checkbox bind:group labelText="{value}" value="{value}" />
 {/each}
 
 <div style="margin: var(--cds-layout-01) 0">
-  Selected options:
-  <strong>{selection.join(", ")}</strong>
+  <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
 </div>
+
+<strong>Selected:</strong>
+{JSON.stringify(group)}

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}

docs/src/pages/framed/Tabs/TabsReactive.svelte

@@ -15,22 +15,9 @@
   </svelte:fragment>
 </Tabs>
 
-<div>
-  <h4>Selected index: {selected}</h4>
+<div style="margin: var(--cds-layout-01) 0">
+  <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
 </div>
 
-<div>
-  <Button
-    size="small"
-    disabled="{selected === 1}"
-    on:click="{() => (selected = 1)}"
-  >
-    Set index to 1
-  </Button>
-</div>
-
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
+<strong>Selected index:</strong>
+{selected}