Preview

Installation

npx sigma-ui@latest add number-field

Usage

<script setup lang="ts">
import { ref } from 'vue';
import {
  NumberField,
  NumberFieldContent,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput,
} from '@/components/ui/number-field';

const value = ref(18);
</script>

<template>
  <NumberField
    v-model="value"
    :min="0"
  >
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>

• Use v-model to control the value, or defaultValue to set an initial value.
• min, max, and step limit the value and set the increment of the stepper buttons.
• formatOptions takes Intl.NumberFormat options to format decimals, percentages, or currencies.

Examples

Disabled

Decimal

Percentage

Currency

Form

API Reference

NumberField

Props

Prop	Type	Default
defaultValue	number	-
modelValue	number | null	-
min The smallest value allowed for the input.	number	-
max The largest value allowed for the input.	number	-
step The amount that the input value changes with each increment or decrement "tick".	number	-
stepSnapping When false, prevents the value from snapping to the nearest increment of the step value	boolean	-
allowInvalid When true, a typed value is kept as-is even if invalid (out of min/max range or off the step grid); step interactions still clamp and snap. The field does not flag the value as invalid (no aria-invalid/data-invalid), so validating and surfacing the error is up to the consumer.	boolean	-
focusOnChange When true, the input will be focused when the value changes.	boolean	-
formatOptions Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.	Intl.NumberFormatOptions	-
locale The locale to use for formatting and currencies	string	-
disabled When true, prevents the user from interacting with the Number Field.	boolean	-
readonly When true, the Number Field is read-only.	boolean	-
disableWheelChange When true, prevents the value from changing on wheel scroll.	boolean	-
invertWheelChange When true, inverts the direction of the wheel change.	boolean	-
id Id of the element	string	-
startingValue The value the first increment or decrement sets when the field is empty. It is clamped to min/max but not snapped to step. Defaults to min, or 0 when min is not set.	number	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue	[val: number]

Slots

Slot	Scope
default The content of the component.	-

NumberFieldInput

This component has no props, events, or slots.

NumberFieldIncrement

Props

Prop	Type	Default
disabled	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

NumberFieldDecrement

Props

Prop	Type	Default
disabled	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

NumberFieldContent

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Spinbutton WAI-ARIA design pattern. Reka UI handles the roles, ARIA attributes, and keyboard interactions.

Key	Description
ArrowUp	Increases the value.
ArrowDown	Decreases the value.
PageUp	Increases the value by a scale of 10.
PageDown	Decreases the value by a scale of 10.
Home	Sets the value to the minimum, when min is set.
End	Sets the value to the maximum, when max is set.
Enter	Applies the typed value.
Tab	Moves focus to the next focusable element.