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

  

import { ref } from 'vue'

const num = ref(1)

Disabled

Steps

Step Strictly

Precision

Sizes

Controls Position

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | model-value / v-model | Binding value | number | 0 | | min | Minimum value | number | -Infinity | | max | Maximum value | number | Infinity | | step | Increment step | number | 1 | | step-strictly | Require step multiples | boolean | false | | precision | Decimal precision | number | — | | size | Size | 'large' \| 'default' \| 'small' | 'default' | | disabled | Whether disabled | boolean | false | | controls | Show control buttons | boolean | true | | controls-position | Button position | '' \| 'right' | — | | name | Native name attribute | string | — | | label | Aria label | string | — | | placeholder | Placeholder | string | — | | value-on-clear | Value when cleared | 'min' \| 'max' \| number \| null | null |

Events

| Name | Description | Type | |------|-------------|------| | change | Triggers when value changes | (value: number, oldValue: number) => void | | input | Triggers on input | (value: number \| null \| undefined) => void | | blur | Triggers on blur | (event: FocusEvent) => void | | focus | Triggers on focus | (event: FocusEvent) => void |

Slots

| Name | Description | |------|-------------| | decrease | Custom decrease button | | increase | Custom increase button |

Exposes

| Name | Description | Type | |------|-------------|------| | focus | Focus the input | () => void | | blur | Blur the input | () => void |

Best Practices

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.