El Input Number

InputNumber Component

InputNumber allows users to input numeric values with controls and validation.

When to Use

• Quantity inputs
• Numeric settings
• Range-limited numbers
• Precise numeric input

Basic Usage

<template>
  <el-input-number v-model="num" :min="1" :max="10" />
</template>

<script setup>
import { ref } from 'vue'

const num = ref(1)
</script>

Disabled

<template>
  <el-input-number v-model="num" disabled />
</template>

Steps

<template>
  <el-input-number v-model="num" :step="2" />
</template>

Step Strictly

<template>
  <el-input-number v-model="num" :step="2" step-strictly />
</template>

Precision

<template>
  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
</template>

Sizes

<template>
  <el-input-number v-model="num" size="large" />
  <el-input-number v-model="num" />
  <el-input-number v-model="num" size="small" />
</template>

Controls Position

<template>
  <el-input-number v-model="num" controls-position="right" />
</template>

API Reference

Attributes

Events

Slots

Exposes

Best Practices

1. Set min and max for valid ranges
2. Use precision for decimal numbers
3. Use controls-position="right" for compact layouts