TuffNexus
|Docs
Components/NumberInput

NumberInput

Numeric input with step controls, clamping, and precision normalization.

VerifiedSince 1.0.0

NumberInput

Basic Usage

NumberInput

Loading demo...

Interaction Contract

  • Empty input normalizes to null.
  • Non-finite input falls back to the previous value, or null when no value exists.
  • min / max clamp typed values and step button results.
  • precision applies Number(value.toFixed(precision)) after clamping.
  • controls=false hides both step buttons and keeps the native numeric field.
  • readonly and disabled block step buttons; disabled also disables the input.

API

Props

PropTypeDefaultDescription
modelValue / v-modelnumber | nullnullCurrent numeric value.
minnumber-Minimum value.
maxnumber-Maximum value.
stepnumber1Step size used by controls and native input.
precisionnumber-Decimal precision after normalization.
placeholderstring''Native input placeholder.
disabledbooleanfalseDisable input and controls.
readonlybooleanfalseMake input read-only and block controls.
controlsbooleantrueShow decrease/increase buttons.

Events

EventParamsDescription
update:modelValue(value: number | null)v-model update after normalization.
change(value: number | null)Emitted with the same normalized value.
focus(event: FocusEvent)Native focus event.
blur(event: FocusEvent)Native blur event; also re-normalizes the field.

Exposed Methods

MethodDescription
focus()Focus the native input.
blur()Blur the native input.
inputRefNative input ref.

Slots

TxNumberInput does not expose slots. Use adjacent form help text or wrapper layout for labels, prefixes, suffixes, and validation copy.

Best Practices

  • Prefer explicit min, max, and step for percentages, quotas, and pagination controls.
  • Use precision for decimals rather than rounding in the consumer after every event.
  • Hide controls for dense table filters where keyboard entry is faster.
  • Treat null as the unset state in validation and API payload mapping.

Review Notes

  • Source: packages/tuffex/packages/components/src/number-input/src/TxNumberInput.vue confirms normalization, clamping, precision handling, attr forwarding, step controls, focus state, and exposed helpers.
  • Verified coverage: Coverage: packages/tuffex/packages/components/src/number-input/__tests__/number-input.test.ts covers numeric attrs, normalized input, clamped step controls, hidden controls, and focus helper exposure.
  • Export: packages/tuffex/packages/components/src/number-input/index.ts wraps the component with withInstall and exports TxNumberInputInstance.

Source

查看源码
packages/tuffex/packages/components/src/number-input/index.ts