nutui/src/packages/__VUE/inputnumber/doc.en-US.md

InputNumber

Intro

Control the number increase or decrease by clicking the button.

Install

import { createApp } from 'vue';
import { InputNumber } from '@nutui/nutui';

const app = createApp();
app.use(InputNumber);

Basic Usage

Initialize a default value

:::demo

<template>
  <nut-input-number v-model="value" />
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(1);
      return { value };
    },
  };
</script>

:::

Step size setting

Set step step 5

:::demo

<template>
  <nut-input-number v-model="value" step="5" />
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(1);
      return { value };
    },
  };
</script>

:::

Limit input range

min and max attributes represent the minimum and maximum values respectively

:::demo

<template>
  <nut-input-number v-model="value" min="10" max="20" />
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(10);
      return { value };
    },
  };
</script>

:::

Disabled state

disabled When disabled, you cannot click the button or modify the input box.

:::demo

<template>
  <nut-input-number v-model="value" disabled />
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(1);
      return { value };
    },
  };
</script>

:::

Read only disable input box

readonly Set read-only disable input box input behavior

:::demo

<template>
  <nut-input-number v-model="value" readonly />
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(1);
      return { value };
    },
  };
</script>

:::

Support decimal point

Set step size step 0.1 decimal places keep 1 decimal place

:::demo

<template>
  <nut-input-number v-model="value" step="0.1" decimal-places="1" />
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(1);
      return { value };
    },
  };
</script>

:::

Support asynchronous modification

Asynchronous modification through change event and model-value

:::demo

<template>
  <nut-input-number :model-value="value" @change="onChange" />
</template>
<script lang="ts">
  import { reactive, getCurrentInstance, toRefs } from 'vue';
  import { showToast } from '@nutui/nutui';
  import '@nutui/nutui/dist/packages/toast/style';
  export default {
    setup() {
      let { proxy } = getCurrentInstance();
      const state = reactive({
        value: 1
      });
      const onChange = (value: number) => {
        showToast.loading('Asynchronous presentation changes in 2 seconds');
        setTimeout(() => {
          state.value = value;
          showToast.hide();
        }, 2000);
      };
      return { ...toRefs(state), onChange };
    },
  };
</script>

:::

Custom button size

:::demo

<template>
  <nut-input-number v-model="value"  button-size="30" input-width="50" />
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const value = ref(1);
      return { value };
    },
  };
</script>

:::

Custsom icon name

:::demo

<template>
  <nut-input-number v-model="value">
    <template #leftIcon>
      <Left />
    </template>
    <template #rightIcon>
      <Right />
    </template>
  </nut-input-number>
</template>
<script lang="ts">
  import { ref } from 'vue';
  import { Left, Right } from '@nutui/icons-vue';
  export default {
    components: { Left, Right },
    setup() {
      const value = ref(1);
      return { value };
    },
  };
</script>

:::

API

Props

Attribute	Description	Type	Default
v-model	Initial value	String、Number	-
input-width	Input box width	String	40px
button-size	Operators +, - Dimensions	String	20px
min	Minimum limit	String、Number	1
max	Maximum limit	String、Number	9999
step	step	String、Number	1
decimal-places	Set reserved decimal places	String、Number	0
disabled	Disable all features	Boolean	false
readonly	Read only status disables input box operation behavior	Boolean	false

Slots

| Name | Description | |-|-| | leftIcon | Custom left icon | | rightIcon | Custom right icon |

Events

Event	Description	Arguments
add	Triggered when the Add button is clicked	event: Event
reduce	Triggered when the decrease button is clicked	event: Event
overlimit	Triggered when an unavailable button is clicked	event: Event,type:string (reduce or add)
change	Triggered when the value changes	value: number , event : Event
blur	Triggered when the input box blur	event: Event
focus	Triggered when the input box focus	event: Event

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--nut-inputnumber-icon-color	var(--nut-title-color)	-
--nut-inputnumber-icon-void-color	var(--nut-disable-color)	-
--nut-inputnumber-icon-size	20px	-
--nut-inputnumber-input-font-size	12px	-
--nut-inputnumber-input-font-color	var(--nut-title-color)	-
--nut-inputnumber-input-background-color	var(--nut-help-color)	-
--nut-inputnumber-input-border-radius	4px	-
--nut-inputnumber-input-width	40px	-
--nut-inputnumber-input-margin	0 6px	-
--nut-inputnumber-input-border	0	-
--nut-inputnumber-border	0	-
--nut-inputnumber-border-radius	0	-
--nut-inputnumber-height	auto	-
--nut-inputnumber-line-height	normal	-
--nut-inputnumber-border-box	content-box	-
--nut-inputnumber-display	flex	-