TxNumberBox · Vue · tecexpress

Numeric input with bounds and steps. An empty input produces null.

Prop	Type	Default	Meaning
`modelValue`	`EditorValue \| undefined`	`undefined`	Controlled v-model value.
`value`	`EditorValue \| undefined`	`undefined`	Current input/option value.
`label`	`string \| undefined`	`undefined`	Label or accessible name.
`name`	`string \| undefined`	`undefined`	Input field name or file name.
`placeholder`	`string \| undefined`	`undefined`	Hint for an empty input.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`readOnly`	`boolean \| undefined`	`false`	Prevents value changes.
`required`	`boolean \| undefined`	`false`	Marks a required input.
`isValid`	`boolean \| undefined`	`true`	Controls error presentation; does not perform validation.
`validationMessage`	`string \| undefined`	`Bitte Eingabe prüfen.`	Error message when isValid is false.
`min`	`string \| number \| undefined`	`undefined`	Lower allowed bound.
`max`	`string \| number \| undefined`	`undefined`	Upper allowed bound.
`step`	`string \| number \| undefined`	`1`	Step size; milliseconds for Vue date ranges.
`rows`	`number \| undefined`	`3`	Visible text rows.
`dataSource`	`TxSource<any> \| undefined`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`items`	`unknown[] \| undefined`	`[]`	Entries; replaced by dataSource when bound.
`displayExpr`	`string \| undefined`	`text`	Field used for visible option text.
`valueExpr`	`string \| undefined`	`value`	Field used for the option value or series value.
`type`	`string \| undefined`	`text`	Appearance/input type; see the signature for allowed values.

Events

Event	Payload / behavior
update:modelValue	New modelValue value; accept using v-model:modelValue (modelValue: v-model).
update:value	New value value; accept using v-model:value (modelValue: v-model).
valueChanged	New value in { value }; editors also include previousValue and event.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TxNumberBox } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const amount = ref<number | null>(10)
</script>

<template>
  <TxNumberBox v-model="amount" :min="0" :max="100" />
</template>

TxNumberBox.