carbon-components-svelte/tests/NumberInput.test.svelte

<script lang="ts">
  import { NumberInput, NumberInputSkeleton } from "carbon-components-svelte";
  import type { NumberInputProps } from "carbon-components-svelte/NumberInput/NumberInput.svelte";

  let value: NumberInputProps["value"] = null;
</script>

{value}

<NumberInput
  disabled
  light
  min="{4}"
  max="{20}"
  value="{4}"
  label="Clusters"
  helperText="Clusters provisioned in your region"
  invalidText="Number must be between 4 and 20."
  on:input="{(e) => {
    console.log({ input: e.detail }); // null | number
  }}"
  on:change="{(e) => {
    console.log({ change: e.detail }); // null | number
  }}"
  on:keydown
  on:keyup
  on:paste
/>

<NumberInput
  disabled
  light
  min="{1}"
  max="{10}"
  value="{4}"
  step="{0.1}"
  label="Clusters"
  helperText="Clusters provisioned in your region"
  invalidText="Number must be between 1 and 10."
  on:input="{(e) => {
    console.log({ input: e.detail }); // null | number
  }}"
  on:change="{(e) => {
    console.log(e.detail); // null | number
  }}"
  on:keydown
  on:keyup
  on:paste
/>

<NumberInputSkeleton hideLabel />