K
KoreUI

Number

Form

Input numerico con controles de incremento/decremento, soporte de long-press y modo moneda.

Uso basico

<x-kore::number label="Cantidad" />
<x-kore::number label="Cantidad" />

Min y Max

Limita el rango de valores permitidos.

Entre 1 y 99

<x-kore::number label="Cantidad" :min="1" :max="99" hint="Entre 1 y 99" />
<x-kore::number label="Cantidad" :min="1" :max="99" hint="Entre 1 y 99" />

Step personalizado

Valores decimales con step de 0.01.

Incrementa de 0.01 en 0.01

<x-kore::number label="Precio" :min="0" :step="0.01" hint="Incrementa de 0.01 en 0.01" />
<x-kore::number label="Precio" :min="0" :step="0.01" hint="Incrementa de 0.01 en 0.01" />

Sin controles

Input numerico simple sin botones +/-.

<x-kore::number label="Monto" :controls="false" placeholder="Ingresa un monto" />
<x-kore::number label="Monto" :controls="false" placeholder="Ingresa un monto" />

Modo moneda

Input con formato de moneda usando Intl.NumberFormat. Muestra el valor formateado y en foco muestra el valor raw para editar.

<x-kore::number label="Monto (USD)" mode="currency" :controls="false" />

{{-- Con controles --}}
<x-kore::number label="Donacion" mode="currency" :step="10" :min="0" :max="10000" />

{{-- Sin decimales --}}
<x-kore::number label="Presupuesto" mode="currency" :precision="0" :controls="false" />
<x-kore::number label="Monto (USD)" mode="currency" :controls="false" />

{{-- Con controles --}}
<x-kore::number label="Donacion" mode="currency" :step="10" :min="0" :max="10000" />

{{-- Sin decimales --}}
<x-kore::number label="Presupuesto" mode="currency" :precision="0" :controls="false" />

Monedas diferentes

Soporte para distintas monedas y locales.

{{-- Peso Mexicano --}}
<x-kore::number label="Monto (MXN)" mode="currency" currency="MXN" locale="es-MX" :controls="false" />

{{-- Euro --}}
<x-kore::number label="Monto (EUR)" mode="currency" currency="EUR" locale="de-DE" :controls="false" />
{{-- Peso Mexicano --}}
<x-kore::number label="Monto (MXN)" mode="currency" currency="MXN" locale="es-MX" :controls="false" />

{{-- Euro --}}
<x-kore::number label="Monto (EUR)" mode="currency" currency="EUR" locale="de-DE" :controls="false" />

Tamanos

Tres tamanos disponibles.

<x-kore::number label="Small" size="sm" />
<x-kore::number label="Medium" size="md" />
<x-kore::number label="Large" size="lg" />
<x-kore::number label="Small" size="sm" />
<x-kore::number label="Medium" size="md" />
<x-kore::number label="Large" size="lg" />

Estados

Disabled, readonly, required y error.

<x-kore::number label="Disabled" disabled value="42" />
<x-kore::number label="Readonly" readonly value="100" />
<x-kore::number label="Required" required />
<x-kore::number label="Con error" error="El valor debe ser mayor a 0" />
<x-kore::number label="Disabled" disabled value="42" />
<x-kore::number label="Readonly" readonly value="100" />
<x-kore::number label="Required" required />
<x-kore::number label="Con error" error="El valor debe ser mayor a 0" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda debajo del input
name string|null null Nombre del input (tambien para deteccion de errores)
error string|null null Mensaje de error manual
size string md Tamano: sm, md, lg
min number|null null Valor minimo
max number|null null Valor maximo
step number 1 Paso de incremento/decremento
controls bool true Mostrar botones +/-
mode string decimal Modo: decimal o currency
currency string USD Codigo ISO 4217 de moneda (configurable via kore-ui.form.number.currency)
locale string|null null Locale BCP 47 para formato (configurable via kore-ui.form.number.locale)
precision int 2 Decimales (configurable via kore-ui.form.number.precision)
prefix string|null null Prefijo personalizado (alternativa a currency)
suffix string|null null Sufijo personalizado (ej: kg)
disabled bool false Estado deshabilitado
readonly bool false Estado de solo lectura
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag