mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-21 20:59:20 +00:00
docs(number-input): add empty value example
This commit is contained in:
parent
c1c421e86e
commit
c82990cfbe
2 changed files with 23 additions and 0 deletions
|
@ -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" />
|
||||||
|
|
15
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
Normal file
15
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
Normal 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}
|
Loading…
Add table
Add a link
Reference in a new issue