InputUnitBase

El componente InputUnitBase permite a los usuarios ingresar un valor numérico junto con una unidad de medida seleccionable.

Para importar el componente InputUnitBase, se puede hacer desde fenextjs

import { InputUnitBase } from "fenextjs";

Parámetro	Tipo	Requerido	Default	Descripcion
defaultValue	Partial<InputUnitValue>	no	{}	Valor por defecto del componente, incluye el valor numérico y la unidad de medida.
value	Partial<InputUnitValue>	no	undefined	Valor actual del componente, incluye el valor numérico y la unidad de medida.
onChange	(data: Partial<InputUnitValue>) => void	no	undefined	Función que se ejecuta cuando el valor o la unidad cambia, recibe el objeto con `value` y `unit`.
options	Unit_All[]	sí	undefined	Opciones disponibles para las unidades de medida, definidas por el tipo `Unit_All`.
className	string	no	undefined	Clase CSS personalizada para el componente principal.
classNameSelect	string	no	undefined	Clase CSS personalizada para el select de unidades.
classNameInput	string	no	undefined	Clase CSS personalizada para el input del valor numérico.

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

<InputUnitBase options={["cm", "in", "ft"]} />

<InputUnitBase
  defaultValue={{ value: 10, unit: "cm" }}
  options={["cm", "in", "ft"]}
/>

<InputUnitBase options={["kg", "g"]} onChange={(data) => console.log(data)} />