NumberField

NumberField renderiza un input de número estilizado que emite un valor numérico. Las cadenas opcionales prepend y append pueden mostrarse a izquierda y derecha del input respectivamente (ej. unidades o símbolos de moneda). La precisión decimal se controla via decimalPlaces, que también determina el step calculado.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | number | No | 0 | Valor numérico actual. | | onChange | (value: number) => void | Sí | — | Llamado con el nuevo valor numérico en cada cambio. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | placeholder | string | No | — | Texto placeholder del input. | | decimalPlaces | number | No | 0 | Cantidad de decimales permitidos. Controla el step calculado cuando no se provee step. | | min | number | No | — | Valor mínimo permitido. | | max | number | No | — | Valor máximo permitido. | | step | number | No | — | Override manual del paso. | | prepend | string | No | — | Texto mostrado a la izquierda del input (ej. '$'). | | prependStyle | React.CSSProperties | No | — | Estilos del span del prepend. | | append | string | No | — | Texto mostrado a la derecha del input (ej. 'kg'). | | appendStyle | React.CSSProperties | No | — | Estilos del span del append. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputWrapperStyle | React.CSSProperties | No | — | Estilos del div wrapper interior. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del div wrapper. | | id | string | No | — | Atributo id del div wrapper. |

Uso

Básico

import React, { useState } from 'react';
import NumberField from '@/components/fields/NumberField';

export default function Example() {
  const [qty, setQty] = useState(0);

  return (
    <NumberField
      label="Cantidad"
      value={qty}
      onChange={setQty}
      min={0}
    />
  );
}

Con unidades y precisión decimal

<NumberField
  label="Peso"
  value={weight}
  onChange={setWeight}
  decimalPlaces={2}
  append="kg"
  min={0}
  description="Ingresá el peso en kilogramos."
/>