InputNumber

Input numerical values with a customizable range.

Basic usage

Bind a variable to v-model in <tu-input-number> element and you are set.

Disabled

The disabled attribute accepts a boolean, and if the value is true, the component is disabled. If you just need to control the value within a range, you can add min attribute to set the minimum value and max to set the maximum value. By default, the minimum value is 0.

Steps

Allows you to define incremental steps.

Step strictly

The step-strictly attribute accepts a boolean. if this attribute is true, input value can only be multiple of step.

Precision

Add precision attribute to set the precision of input value.

Controls Position

Setting the controls-position to decide the position of control buttons.

Sizes

Besides default size, tu-input-number component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

<template>
  <tu-row :gutter="20" class="demo-input-row mb-2">
    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue1"
        size="mini"
        placeholder="Please input"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue2"
        size="small"
        placeholder="Please input"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number v-model="inputNumberValue3" placeholder="Please input" />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue4"
        size="large"
        placeholder="Please input"
      />
    </tu-col>
  </tu-row>

  <tu-row :gutter="20" class="demo-input-row">
    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue1"
        size="mini"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue2"
        size="small"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue3"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue4"
        size="large"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const inputNumberValue1 = ref();
const inputNumberValue2 = ref();
const inputNumberValue3 = ref();
const inputNumberValue4 = ref();
</script>

<style>
.demo-input-row {
  align-items: baseline;
}
</style>

<template>
  <tu-row :gutter="20" class="demo-input-row mb-2">
    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue1"
        size="mini"
        placeholder="Please input"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue2"
        size="small"
        placeholder="Please input"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number v-model="inputNumberValue3" placeholder="Please input" />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue4"
        size="large"
        placeholder="Please input"
      />
    </tu-col>
  </tu-row>

  <tu-row :gutter="20" class="demo-input-row">
    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue1"
        size="mini"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue2"
        size="small"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue3"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>

    <tu-col :span="6">
      <tu-input-number
        v-model="inputNumberValue4"
        size="large"
        placeholder="Please input"
        controls-position="right"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const inputNumberValue1 = ref();
const inputNumberValue2 = ref();
const inputNumberValue3 = ref();
const inputNumberValue4 = ref();
</script>

<style>
.demo-input-row {
  align-items: baseline;
}
</style>

InputNumber API

InputNumber Attributes

Name	Description	Type	Default
v-model	Binding value	`String` `Number`	-
size	Size of input number	`String`	medium
disabled	Whether the component is disabled	`Boolean`	-
readonly	Same as readonly in native input	`Boolean`	false
min	The minimum allowed value	`Number`	-Infinity
max	The maximum allowed value	`Number`	Infinity
step	Incremental step	`Number`	1
step-strictly	Whether input value can only be multiple of step	`Boolean`	false
precision	Precision of input value	`Number`	-
controls	Whether to enable the control buttons	`Boolean`	true
controls-position	Position of the control buttons	`String`	right
name	Same as name in native input	`String`	-
label	Same as label in native input	`String`	-
placeholder	Same as placeholder in native input	`String`	-
id	Same as id in native input	`String`	-
value-on-clear	Value should be set when input box is cleared	`Number` `Null` `String`	-
validate-event	Whether to trigger form validation	`Boolean`	true

InputNumber Events

Name	Description	Type
change	Triggers when the value changes	`Function`
blur	Triggers when Input blurs	`Function`
focus	Triggers when Input focuses	`Function`

InputNumber Exposes

Name	Description	Type
focus	Get focus the input component	`Function`
blur	Remove focus the input component	`Function`

InputNumber ​

Basic usage ​

Disabled ​

Steps ​

Step strictly ​

Precision ​

Controls Position ​

Sizes ​

InputNumber API ​

InputNumber Attributes ​

InputNumber Events ​

InputNumber Exposes ​