InputNumber

Maps to Arco InputNumber: side controls match button mode and right-hand controls match embed mode. See the Element Plus docs for props.

Side Controls

Default controls match Arco button mode; align="left" aligns the value.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(3)
</script>

<template>
  <el-input-number v-model="value" align="left" :min="0" :max="10" />
  <el-input-number v-model="value" size="small" align="left" />
  <el-input-number v-model="value" size="large" align="left" />
  <el-input-number :model-value="3" disabled align="left" />
</template>

Right Controls

Right controls match Arco's default embed mode and appear on hover or focus.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(3)
</script>

<template>
  <el-input-number v-model="value" controls-position="right" align="left" />
</template>

Without Controls

Setting controls to false matches Arco hide-button.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(3)
</script>

<template>
  <el-input-number v-model="value" :controls="false" align="left" />
</template>

Differences from Arco

• Element Plus centers values by default; set align="left" for Arco alignment.
• Control icons and keyboard focus behavior differ from Arco.