mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
faddb4c654
2. Fix last commits and the `invalid` state border works again. 3. If the `invalid` state is set by the user, we must use `setCustomValidity` to set input validity to false. 4. `invalidText` must have a default and must not be empty. If empty, it will set the validity to true. I don't know if we should check for that.
23 lines
552 B
Svelte
23 lines
552 B
Svelte
<script>
|
|
import { NumberInput, Button } from "carbon-components-svelte";
|
|
|
|
let value = null;
|
|
let invalid = false;
|
|
</script>
|
|
|
|
<NumberInput required="{false}" bind:value="{value}" invalid="{invalid}" />
|
|
|
|
<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>
|
|
<Button on:click="{() => (invalid = !invalid)}">Toggle invalid</Button>
|
|
</div>
|
|
|
|
<p>
|
|
<strong>Value:</strong>
|
|
{value}
|
|
</p>
|
|
<p>
|
|
<strong>Invalid:</strong>
|
|
{invalid}
|
|
</p>
|