Number Field

Installation

pnpm dlx shadcn-svelte@latest add https://coss.miel.my/r/number-field.json

Usage

<script lang="ts">
  import * as NumberField from "$lib/components/ui/number-field/index.js";
</script>

<NumberField.Root defaultValue={0}>
  <NumberField.ScrubArea label="Quantity" />
  <NumberField.Group>
    <NumberField.Decrement />
    <NumberField.Input />
    <NumberField.Increment />
  </NumberField.Group>
</NumberField.Root>

API Reference

NumberField.Root

Root component for the local Svelte number-field behavior.

NumberField.Group

Container for the input and buttons.

NumberField.Input

Input element for the numeric value.

NumberField.Increment

Button that increments the value and displays the Hugeicons add glyph.

NumberField.Decrement

Button that decrements the value and displays the Hugeicons minus glyph.

NumberField.ScrubArea

Draggable area for scrubbing the value.

Examples

For accessible labelling and validation, prefer using Field to wrap number fields. See Number field.

Small Size

Large Size

Disabled

With External Label

With Scrub

With Range

With Formatted Value

With Step

Form Integration

Set name on NumberField.Root and leave the surrounding Field.Root unnamed. This submits one canonical numeric value while preserving the visible input’s form owner and Enter submission. A named Field.Root currently gives both the visible input and the hidden numeric input the same name, producing duplicate form entries; formatted input can also submit locale-specific text.

<Field.Root>
  <NumberField.Root name="quantity" defaultValue={1} min={1} max={100}>
    <NumberField.ScrubArea label="Quantity" />
    <NumberField.Group>
      <NumberField.Decrement />
      <NumberField.Input />
      <NumberField.Increment />
    </NumberField.Group>
  </NumberField.Root>
</Field.Root>

An unnamed field does not associate server errors by field name. If your form uses server errors, handle their display and invalid state explicitly. The example below validates the submitted quantity and shows a success alert; it does not render Field.Error.