n-input-number

Create configurable numeric input components with min, max, step, and formatting.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-input-number
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: n-input-number
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-input-number
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-input-number

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The n-input-number component provides a robust solution for collecting numeric data by offering built-in min/max constraints, step controls, precision handling, and formatting options, reducing user input errors and development effort.

Core Features & Use Cases

  • Increments and decrements with configurable step
  • Min/max bounds, precision control, and custom formatting
  • Custom parsing and validation, with events for value changes and focus/blur
  • Use cases include quantity selectors, price inputs, and numeric forms with consistent UX

Quick Start

Create a simple n-input-number with min 0, max 100, and step 1 to capture user quantities.

Frequently Asked Questions about n-input-number

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement numeric input with min, max, and step controls in Vue?

To capture numeric data with min, max, and step controls in Vue, use a configurable input-number component. It provides built-in bounds, precision handling, and increment/decrement features for data entry UIs.

Can I add custom formatting and validation to a Vue numeric input?

Yes, custom formatting and validation can be added to a Vue numeric input. The component supports custom parsing, formatting, and validation rules, emitting events for value changes and focus/blur interactions.

Does naive-ui support precision handling for numeric forms?

Naive-ui supports precision handling for numeric forms through its input-number component. It allows strict decimal precision configuration alongside min/max bounds to reduce user input errors.

What is the best way to capture price or quantity inputs in a Vue dashboard?

The best way to capture price or quantity inputs in a Vue dashboard is using a dedicated numeric input component. It ensures consistent UX with configurable steps, precision, and prefix/suffix slots.

How do I handle accessibility when building a numeric input component?

To handle accessibility when building a numeric input component, utilize built-in accessibility considerations alongside custom slots for prefix and suffix content. This ensures usable increment, decrement, and validation interactions.