Number Input
Un componente para entrada de valores numéricos con controles de incremento/decremento y animaciones.
import { NumberInput } from "stofli-ui";Muestra un input numérico con un valor predeterminado de 10, un rango mínimo de 0 y un rango máximo de 100.
El componente NumberInput ofrece distintas variantes para adaptarse a diferentes contextos visuales.
Puedes elegir entre diferentes tamaños para el input numérico.
Puedes personalizar el radio de los bordes del input para adaptarlo a tu diseño.
Puedes elegir diferentes posiciones para los controles de incremento/decremento.
El componente ofrece diferentes estilos de layout para los controles.
Puedes elegir entre diferentes estilos de iconos para los controles.
El componente incluye diferentes estilos de animación cuando el valor cambia.
Puedes establecer valores mínimos y máximos, así como el paso de incremento/decremento.
Muestra un mensaje de error cuando se cumple una condición, en este caso, cuando el valor es negativo.
Puedes personalizar cada parte del componente usando las propiedades de className específicas para darle un aspecto único con Tailwind CSS.
| Prop | Tipo | Valor por defecto | Descripción |
|---|---|---|---|
value | number | - | Valor controlado del input numérico |
defaultValue | number | - | Valor inicial no controlado |
min | number | - | Valor mínimo permitido |
max | number | - | Valor máximo permitido |
step | number | 1 | Incremento por cada pulsación en los controles |
disabled | boolean | false | Deshabilita el input |
readonly | boolean | false | Modo solo lectura |
label | string | - | Etiqueta descriptiva para el input |
placeholder | string | - | Texto de marcador de posición |
error | string | - | Mensaje de error a mostrar |
size | "sm" | "md" | "lg" | "md" | Tamaño del componente |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
radius | "none" | "sm" | "md" | "full" | "md" | Radio de las esquinas |
fullWidth | boolean | false | Ocupa el 100% del ancho disponible |
className | string | - | Clases CSS personalizadas para el contenedor |
inputClassName | string | - | Clases CSS personalizadas para el input |
labelClassName | string | - | Clases CSS personalizadas para la etiqueta |
errorClassName | string | - | Clases CSS personalizadas para el mensaje de error |
controlsClassName | string | - | Clases CSS personalizadas para el contenedor de controles |
controlButtonClassName | string | - | Clases CSS personalizadas para los botones de control |
inputContainerClassName | string | - | Clases CSS personalizadas para el contenedor del input |
controlsLayout | "default" | "compact" | "split" | "default" | Diseño de los controles |
controlsPosition | "right" | "both" | "right" | Posición de los controles |
showControls | boolean | true | Muestra u oculta los controles |
iconSet | "chevron" | "plusminus" | "chevron" | Conjunto de iconos a utilizar |
required | boolean | false | Marca el campo como obligatorio |
name | string | - | Nombre del campo (para formularios) |
id | string | - | ID único del elemento |
animationStyle | "slide" | "pulse" | "scale" | "bounce" | "slide" | Estilo de animación al cambiar valor |
format | "default" | "percentage" | "currency" | "signed" | "default" | Formato de visualización del valor |
formatOptions | { symbol?: string; position?: "prefix" | "suffix" } | {} | Opciones adicionales para el formato seleccionado |
onChange | (value: number) => void | - | Función que se ejecuta al cambiar el valor |
onFocus | (e: React.FocusEvent<HTMLInputElement>) => void | - | Función que se ejecuta cuando el input recibe el foco |
onBlur | (e: React.FocusEvent<HTMLInputElement>) => void | - | Función que se ejecuta cuando el input pierde el foco |
aria-label | string | - | Etiqueta ARIA personalizada |
aria-describedby | string | - | ID del elemento que describe el input |
description | string | - | Texto descriptivo para el input |
errorId | string | - | ID personalizado para el mensaje de error |
descriptionId | string | - | ID personalizado para la descripción |
hideLabel | boolean | false | Oculta visualmente la etiqueta pero la mantiene accesible |
autoComplete | string | - | Valor para el atributo autoComplete del input |