coss.com Svelte

0

Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/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.

Prop	Type	Default	Description
`size`	`"sm" \\| "default" \\| "lg"`	`"default"`	Controls the size of all child components through context

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.

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed in the scrub area

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