Number Input

A numeric input component with increment and decrement controls.

<script lang="ts" setup>
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root>
    <NumberInput.Label>
      Label:
      <NumberInput.ValueText />
    </NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Scrubber />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import type { UseNumberInputProps } from '@destyler-ui/react'
import { NumberInput } from '@destyler-ui/react'

export function Basic(props: UseNumberInputProps) {
  return (
    <NumberInput.Root {...props}>
      <NumberInput.Label>
        Label:
        <NumberInput.ValueText />
      </NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Scrubber />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function Basic() {
  return (
    <NumberInput.Root>
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script module lang="ts">
  import type { NumberInputRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends NumberInputRootProps {}
</script>

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<NumberInput.Root {...props}>
  <NumberInput.Label>
    Label:
    <NumberInput.ValueText />
  </NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Scrubber />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Anatomy

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root>
    <NumberInput.Label />
    <NumberInput.ValueText />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger />
      <NumberInput.Input />
      <NumberInput.IncrementTrigger />
    </NumberInput.Control>
    <NumberInput.Scrubber />
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export default function Basic() {
  return (
    <NumberInput.Root>
      <NumberInput.Label />
      <NumberInput.ValueText />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger />
        <NumberInput.Input />
        <NumberInput.IncrementTrigger />
      </NumberInput.Control>
      <NumberInput.Scrubber />
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <NumberInput.Root>
      <NumberInput.Label />
      <NumberInput.ValueText />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger />
        <NumberInput.Input />
        <NumberInput.IncrementTrigger />
      </NumberInput.Control>
      <NumberInput.Scrubber />
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root>
  <NumberInput.Label>
    Quantity: <NumberInput.ValueText />
  </NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Scrubber />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Examples

Basic

<script lang="ts" setup>
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root>
    <NumberInput.Label>
      Label:
      <NumberInput.ValueText />
    </NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Scrubber />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import type { UseNumberInputProps } from '@destyler-ui/react'
import { NumberInput } from '@destyler-ui/react'

export function Basic(props: UseNumberInputProps) {
  return (
    <NumberInput.Root {...props}>
      <NumberInput.Label>
        Label:
        <NumberInput.ValueText />
      </NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Scrubber />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function Basic() {
  return (
    <NumberInput.Root>
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script module lang="ts">
  import type { NumberInputRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends NumberInputRootProps {}
</script>

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<NumberInput.Root {...props}>
  <NumberInput.Label>
    Label:
    <NumberInput.ValueText />
  </NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Scrubber />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Min/Max

Set minimum and maximum value constraints.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root :min="0" :max="10">
    <NumberInput.Scrubber />
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function MinMax() {
  return (
    <NumberInput.Root min={0} max={10}>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function MinMax() {
  return (
    <NumberInput.Root min={0} max={10}>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root min={0} max={10}>
  <NumberInput.Scrubber />
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Fraction Digits

Control the number of decimal places.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root :formatOptions="{ minimumFractionDigits: 2, maximumFractionDigits: 3 }" model-value="1.00">
    <NumberInput.Scrubber />
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function FractionDigits() {
  return (
    <NumberInput.Root
      formatOptions={{ minimumFractionDigits: 2, maximumFractionDigits: 3 }}
      defaultValue="1.00"
    >
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function FractionDigits() {
  return (
    <NumberInput.Root
      formatOptions={{ minimumFractionDigits: 2, maximumFractionDigits: 4 }}
      value="1.00"
    >
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root
  formatOptions={{ minimumFractionDigits: 2, maximumFractionDigits: 3 }}
  defaultValue="1.00"
>
  <NumberInput.Scrubber />
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Formatted

Display formatted numeric values with locale support.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root :formatOptions="{ style: 'currency', currency: 'USD' }">
    <NumberInput.Scrubber />
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function Formatted() {
  return (
    <NumberInput.Root formatOptions={{ style: 'currency', currency: 'USD' }}>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function Formatted() {
  return (
    <NumberInput.Root
      formatOptions={{
        style: 'currency',
        currency: 'USD',
      }}
    >
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root formatOptions={{ style: 'currency', currency: 'USD' }}>
  <NumberInput.Scrubber />
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Form Usage

Use number input in a form context.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root name="quantity">
    <NumberInput.Scrubber />
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function FormUsage() {
  return (
    <NumberInput.Root name="quantity">
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function FormUsage() {
  return (
    <NumberInput.Root name="quantity">
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root name="quantity">
  <NumberInput.Scrubber />
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Mouse Wheel

Enable value changes via mouse wheel.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root allowMouseWheel>
    <NumberInput.Scrubber />
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function MouseWheel() {
  return (
    <NumberInput.Root allowMouseWheel>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function MouseWheel() {
  return (
    <NumberInput.Root allowMouseWheel>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root allowMouseWheel>
  <NumberInput.Scrubber />
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

No Clamp

Allow values outside the min/max range.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root :clampValueOnBlur="false">
    <NumberInput.Scrubber />
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function NoClamp() {
  return (
    <NumberInput.Root clampValueOnBlur={false}>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function NoClamp() {
  return (
    <NumberInput.Root clampValueOnBlur={false}>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root clampValueOnBlur={false}>
  <NumberInput.Scrubber />
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Scrubber

Use the scrubber for drag-based value changes.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root>
    <NumberInput.Scrubber />
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function Scrubber() {
  return (
    <NumberInput.Root>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function Scrubber() {
  return (
    <NumberInput.Root>
      <NumberInput.Scrubber />
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root>
  <NumberInput.Scrubber />
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Render Function

Use render function for custom rendering.

<script setup lang="ts">
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <NumberInput.Root>
    <NumberInput.Scrubber />
    <NumberInput.Context v-slot="numberInput">
      <NumberInput.Label>Label {{ numberInput.valueAsNumber }}</NumberInput.Label>
    </NumberInput.Context>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

import { NumberInput } from '@destyler-ui/react'

export function RenderFn() {
  return (
    <NumberInput.Root>
      <NumberInput.Scrubber />
      <NumberInput.Context>
        {numberInput => (
          <NumberInput.Label>Label {numberInput.valueAsNumber}</NumberInput.Label>
        )}
      </NumberInput.Context>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

import { NumberInput } from '@destyler-ui/solid/number-input'

export function RenderFn() {
  return (
    <NumberInput.Root>
      <NumberInput.Scrubber />
      <NumberInput.Context>
        {context => <NumberInput.Label>Label {context().valueAsNumber}</NumberInput.Label>}
      </NumberInput.Context>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
  )
}

<script lang="ts">
  import { NumberInput } from '@destyler-ui/svelte'
</script>

<NumberInput.Root>
  <NumberInput.Scrubber />
  <NumberInput.Context>
    {#snippet render(numberInput)}
      <NumberInput.Label>Label {numberInput().valueAsNumber}</NumberInput.Label>
    {/snippet}
  </NumberInput.Context>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

With Field

Combine with a form field for validation and labeling.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { NumberInput } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root>
    <NumberInput.Root>
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Input />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import type { UseNumberInputProps } from '@destyler-ui/react'
import { Field } from '@destyler-ui/react'
import { NumberInput } from '@destyler-ui/react'

export interface WithFieldProps extends UseNumberInputProps {
  invalid?: boolean
}

export function WithField(props: WithFieldProps) {
  const { invalid, ...numberInputProps } = props

  return (
    <Field.Root invalid={invalid}>
      <NumberInput.Root {...numberInputProps}>
        <NumberInput.Label>Label</NumberInput.Label>
        <NumberInput.Input />
        <NumberInput.Control>
          <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
          <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
        </NumberInput.Control>
      </NumberInput.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { NumberInput } from '@destyler-ui/solid/number-input'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <NumberInput.Root>
        <NumberInput.Label>Label</NumberInput.Label>
        <NumberInput.Input />
        <NumberInput.Control>
          <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
          <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
        </NumberInput.Control>
      </NumberInput.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { NumberInputRootProps } from '@destyler-ui/svelte'

  export interface WithFieldProps extends NumberInputRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { NumberInput } from '@destyler-ui/svelte'

  const {
    invalid,
    disabled,
    readOnly,
    required,
    ...numberInputProps
  }: WithFieldProps = $props()
</script>

<Field.Root {invalid} {disabled} {readOnly} {required}>
  <NumberInput.Root {...numberInputProps}>
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { NumberInput, useNumberInput } from '@destyler-ui/vue'

const numberInput = useNumberInput()
</script>

<template>
  <button @click="numberInput.focus()">Focus</button>

  <NumberInput.RootProvider :value="numberInput">
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Input />
    <NumberInput.Control>
      <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
      <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
    </NumberInput.Control>
  </NumberInput.RootProvider>
</template>

import { NumberInput, useNumberInput } from '@destyler-ui/react'

export function RootProvider() {
  const numberInput = useNumberInput()

  return (
    <>
      <button onClick={() => numberInput.focus()}>Focus</button>

      <NumberInput.RootProvider value={numberInput}>
        <NumberInput.Label>Label</NumberInput.Label>
        <NumberInput.Input />
        <NumberInput.Control>
          <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
          <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
        </NumberInput.Control>
      </NumberInput.RootProvider>
    </>
  )
}

import { NumberInput, useNumberInput } from '@destyler-ui/solid/number-input'

export function RootProvider() {
  const numberInput = useNumberInput()

  return (
    <>
      <button onClick={() => numberInput().focus()}>Focus</button>

      <NumberInput.RootProvider value={numberInput}>
        <NumberInput.Label>Label</NumberInput.Label>
        <NumberInput.Input />
        <NumberInput.Control>
          <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
          <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
        </NumberInput.Control>
      </NumberInput.RootProvider>
    </>
  )
}

<script lang="ts">
  import { NumberInput, useNumberInput } from '@destyler-ui/svelte'

  const id = $props.id()
  const numberInput = useNumberInput({ id })
</script>

<button type="button" onclick={() => numberInput().focus()}>Focus</button>
<NumberInput.RootProvider value={numberInput}>
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger>-1</NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger>+1</NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.RootProvider>

API Reference

Root

Prop	Default	Type
`allowMouseWheel`	—	`false \| true` Whether to allow mouse wheel to change the value
`allowOverflow`	`true`	`false \| true` Whether to allow the value overflow the min/max range
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`clampValueOnBlur`	`true`	`false \| true` Whether to clamp the value when the input loses focus (blur)
`defaultValue`	—	`string` The initial value of the number input when it is first rendered. Use when you do not need to control the state of the number input.
`disabled`	—	`false \| true` Whether the number input is disabled.
`focusInputOnChange`	`true`	`false \| true` Whether to focus input when the value changes
`form`	—	`string` The associate form of the input element.
`formatOptions`	—	`Intl.NumberFormatOptions` The options to pass to the `Intl.NumberFormat` constructor
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string; }>` The ids of the elements in the number input. Useful for composition.
`inputMode`	`"decimal"`	`"text" \| "tel" \| "numeric" \| "decimal"` Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
`invalid`	—	`false \| true` Whether the number input value is invalid.
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`max`	`Number.MAX_SAFE_INTEGER`	`number` The maximum value of the number input
`min`	`Number.MIN_SAFE_INTEGER`	`number` The minimum value of the number input
`modelValue`	—	`string`
`name`	—	`string` The name attribute of the number input. Useful for form submission.
`pattern`	`"[0-9]*(.[0-9]+)?"`	`string` The pattern used to check the <input> element's value against
`readOnly`	—	`false \| true` Whether the number input is readonly
`required`	—	`false \| true` Whether the number input is required
`spinOnPress`	`true`	`false \| true` Whether to spin the value when the increment/decrement button is pressed
`step`	`1`	`number` The amount to increment or decrement the value by
`translations`	—	`numberInput.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states

Emit	Event
`focusChange`	`[details: FocusChangeDetails]` Function invoked when the number input is focused
`update:modelValue`	`[value: string]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` Function invoked when the value changes
`valueInvalid`	`[details: ValueInvalidDetails]` Function invoked when the value overflows or underflows the min/max range

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

DecrementTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

IncrementTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Scrubber

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`allowMouseWheel`	—	`false \| true` Whether to allow mouse wheel to change the value
`allowOverflow`	`true`	`false \| true` Whether to allow the value overflow the min/max range
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`clampValueOnBlur`	`true`	`false \| true` Whether to clamp the value when the input loses focus (blur)
`defaultValue`	—	`string` The initial value of the number input when it is first rendered. Use when you do not need to control the state of the number input.
`disabled`	—	`false \| true` Whether the number input is disabled.
`focusInputOnChange`	`true`	`false \| true` Whether to focus input when the value changes
`form`	—	`string` The associate form of the input element.
`formatOptions`	—	`Intl.NumberFormatOptions` The options to pass to the `Intl.NumberFormat` constructor
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string; }>` The ids of the elements in the number input. Useful for composition.
`inputMode`	`"decimal"`	`"text" \| "tel" \| "numeric" \| "decimal"` Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
`invalid`	—	`false \| true` Whether the number input value is invalid.
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`max`	`Number.MAX_SAFE_INTEGER`	`number` The maximum value of the number input
`min`	`Number.MIN_SAFE_INTEGER`	`number` The minimum value of the number input
`name`	—	`string` The name attribute of the number input. Useful for form submission.
`onFocusChange`	—	`(details: numberInput.FocusChangeDetails) => void` Function invoked when the number input is focused
`onValueChange`	—	`(details: numberInput.ValueChangeDetails) => void` Function invoked when the value changes
`onValueInvalid`	—	`(details: numberInput.ValueInvalidDetails) => void` Function invoked when the value overflows or underflows the min/max range
`pattern`	`"[0-9]*(.[0-9]+)?"`	`string` The pattern used to check the <input> element's value against
`readOnly`	—	`false \| true` Whether the number input is readonly
`required`	—	`false \| true` Whether the number input is required
`spinOnPress`	`true`	`false \| true` Whether to spin the value when the increment/decrement button is pressed
`step`	`1`	`number` The amount to increment or decrement the value by
`translations`	—	`numberInput.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`	—	`string` The value of the input

Context

Prop	Default	Type
`children*`	—	`(context: UseNumberInputContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

DecrementTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

IncrementTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Provider

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`UseNumberInputReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Scrubber

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`allowMouseWheel`	—	`false \| true` Whether to allow mouse wheel to change the value
`allowOverflow`	`true`	`false \| true` Whether to allow the value overflow the min/max range
`asChild`	—	`(props: (userProps?: solid_js109.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`clampValueOnBlur`	`true`	`false \| true` Whether to clamp the value when the input loses focus (blur)
`defaultValue`	—	`string` The initial value of the number input when it is first rendered. Use when you do not need to control the state of the number input.
`disabled`	—	`false \| true` Whether the number input is disabled.
`focusInputOnChange`	`true`	`false \| true` Whether to focus input when the value changes
`form`	—	`string` The associate form of the input element.
`formatOptions`	—	`Intl.NumberFormatOptions` The options to pass to the `Intl.NumberFormat` constructor
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string; }>` The ids of the elements in the number input. Useful for composition.
`inputMode`	`"decimal"`	`"text" \| "tel" \| "numeric" \| "decimal"` Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
`invalid`	—	`false \| true` Whether the number input value is invalid.
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`max`	`Number.MAX_SAFE_INTEGER`	`number` The maximum value of the number input
`min`	`Number.MIN_SAFE_INTEGER`	`number` The minimum value of the number input
`name`	—	`string` The name attribute of the number input. Useful for form submission.
`onFocusChange`	—	`(details: FocusChangeDetails) => void` Function invoked when the number input is focused
`onValueChange`	—	`(details: ValueChangeDetails) => void` Function invoked when the value changes
`onValueInvalid`	—	`(details: ValueInvalidDetails) => void` Function invoked when the value overflows or underflows the min/max range
`pattern`	`"[0-9]*(.[0-9]+)?"`	`string` The pattern used to check the <input> element's value against
`readOnly`	—	`false \| true` Whether the number input is readonly
`required`	—	`false \| true` Whether the number input is required
`spinOnPress`	`true`	`false \| true` Whether to spin the value when the increment/decrement button is pressed
`step`	`1`	`number` The amount to increment or decrement the value by
`translations`	—	`numberInput.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`	—	`string` The value of the input

Context

Prop	Default	Type
`children*`	—	`(context: UseNumberInputContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js109.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

DecrementTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js109.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

IncrementTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js109.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js109.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js109.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Provider

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`UseNumberInputReturn`
`asChild`	—	`(props: (userProps?: solid_js109.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Scrubber

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js109.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js109.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`allowMouseWheel`	—	`false \| true` Whether to allow mouse wheel to change the value
`allowOverflow`	`true`	`false \| true` Whether to allow the value overflow the min/max range
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`clampValueOnBlur`	`true`	`false \| true` Whether to clamp the value when the input loses focus (blur)
`defaultValue`	—	`string`
`disabled`	—	`false \| true` Whether the number input is disabled.
`focusInputOnChange`	`true`	`false \| true` Whether to focus input when the value changes
`form`	—	`string` The associate form of the input element.
`formatOptions`	—	`Intl.NumberFormatOptions` The options to pass to the `Intl.NumberFormat` constructor
`id`	—	`string` A stable id for the number input. Svelte hooks cannot call `$props.id()`. Components should pass the id generated at the component's top level; `NumberInput.Root` does this automatically.
`ids`	—	`Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string; }>` The ids of the elements in the number input. Useful for composition.
`inputMode`	`"decimal"`	`"text" \| "tel" \| "numeric" \| "decimal"` Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
`invalid`	—	`false \| true` Whether the number input value is invalid.
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`max`	`Number.MAX_SAFE_INTEGER`	`number` The maximum value of the number input
`min`	`Number.MIN_SAFE_INTEGER`	`number` The minimum value of the number input
`name`	—	`string` The name attribute of the number input. Useful for form submission.
`onFocusChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").NumberInputFocusChangeDetails) => void` Function invoked when the number input is focused
`onValueChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").NumberInputValueChangeDetails) => void` Function invoked when the value changes
`onValueInvalid`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").NumberInputValueInvalidDetails) => void` Function invoked when the value overflows or underflows the min/max range
`pattern`	`"[0-9]*(.[0-9]+)?"`	`string` The pattern used to check the <input> element's value against
`readOnly`	—	`false \| true` Whether the number input is readonly
`required`	—	`false \| true` Whether the number input is required
`spinOnPress`	`true`	`false \| true` Whether to spin the value when the increment/decrement button is pressed
`step`	`1`	`number` The amount to increment or decrement the value by
`translations`	—	`IntlTranslations \| undefined` Specifies the localized strings that identifies the accessibility elements and their states
`value`	—	`string` The value of the input

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseNumberInputContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

DecrementTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

IncrementTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Input

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

Provider

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`UseNumberInputReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Scrubber

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ValueText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`