docs(number-input): add empty value example

This commit is contained in:
Eric Liu 2022-01-27 07:20:56 -08:00
commit c82990cfbe
2 changed files with 23 additions and 0 deletions

View file

@ -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)" /> <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 ### Hidden label
<NumberInput hideLabel label="Clusters" /> <NumberInput hideLabel label="Clusters" />

View file

@ -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}