Usage

NumberInput is a numeric field. People type a number; add hasNumberSteppers when they should also get up and down chevrons. min and max clamp the value, and step sets how much each click changes it.

Bind a number:

<script setup lang="ts">
import { NumberInput } from '@astryx-vue/core/NumberInput'
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <NumberInput v-model="count" :min="0" :max="100" />
</template>

Values outside min and max are pulled back into range. The stepper names are English unless the app calls provideAstryxLocale('zh-CN'). When label is set, it is included in those names.

Three props adjust the field to the number it holds. isIntegerOnly keeps decimals out of the committed value. formatValue shows a readable form while the field is idle, such as 1,234 items, and switches back to the raw number on focus. isWheelEnabled={false} stops the wheel from stepping the value where page scrolling matters more.

Anatomy

Element	Description
Label	The label for the number input.
Description	Additional description text below the label.
Icon	An optional icon within the input.
Placeholder	Placeholder text shown when the input is empty.
Number steppers	Optional buttons that increment or decrement by the configured step.

Best practices

Guideline	Practice
Do	Set min and max when the value has a real range.
Do	Pick a step that matches the field: 1 for a count, 0.01 for a price.
Do	Put the unit in the label, such as "Quantity (pcs)", rather than inside the field.
Don't	Use a tiny step across a wide range. People will have to click the stepper many times.

Examples

Clearable

Progress

%

Progress from 0 to 100, with a percent suffix and a clear button.

Range

Team Size

Number of people on the team

Team size from 1 to 50, with a description of what the number means.

Status

Budget

Must be a positive amount

Headcount

Exceeds typical team size

Completion

%

On track

Error, warning, and success on budget, headcount, and completion.

Units

Discount

%

A discount with a percent suffix, limited to 0–100.