Component specification

A number input component allowing users to enter and adjust numeric values. Supports value constraints, decimal precision, and increment/decrement controls.

• Component Name: N8nInputNumber
• Element+ Component: ElInputNumber
• Reka UI Component: NumberField
• Nuxt UI Component: InputNumber

Public API Definition

Props

• modelValue?: number | null - The current numeric value. Use with v-model for two-way binding.
• size?: 'mini' | 'small' | 'medium' | 'large' | 'xlarge' - Size variant. Default: 'medium'
• min?: number - Minimum allowed value. Default: -Infinity
• max?: number - Maximum allowed value. Default: Infinity
• step?: number - Increment/decrement step amount. Default: 1
• precision?: number - Number of decimal places. Maps to Reka UI formatOptions.maximumFractionDigits.
• controls?: boolean - Whether to show increment/decrement buttons. Default: false
• controlsPosition?: 'both' | 'right' - Position of control buttons. 'both' places −/+ on left/right sides. 'right' places stacked up/down arrows on the right. Default: 'right'
• disabled?: boolean - Disables the input. Default: false
• placeholder?: string - Placeholder text when empty.

Events

• update:modelValue - Emitted when value changes. Payload: number | null
• focus - Emitted when input gains focus. Payload: FocusEvent
• blur - Emitted when input loses focus. Payload: FocusEvent

Slots

• increment - Custom content for increment button (when controls is true).
• decrement - Custom content for decrement button (when controls is true).

Template usage example

Basic number input:

<script setup lang="ts">

const value = ref(0)
</script>

<template>
  
</template>

Basic usage (controls hidden by default):

With step and precision:

Disabled state:

Size variants:

With controls and custom buttons:

  <template #decrement>
    
  </template>
  <template #increment>
    
  </template>