componente · @solu30/ui-kit/input

QuantityUnitField

El componente, montado

Cargando el espécimen…

Cargando el chunk del paquete instalado…

De dónde se importa

import { QuantityUnitField } from '@solu30/ui-kit/input'

Props

11 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`string \| null \| undefined`	Current numeric value as string (e.g. "500", "1.5"). Pass null or undefined to render an empty field.
unit	sí	`string`	Currently selected unit string (e.g. "g", "kg", "ml", "L", "u"). Must match one of the rendered options; if not, the browser will default to the first option.
family	opcional	`UnitFamily \| null`	Restricts the unit dropdown to a physical domain. "weight" → g, kg "volume" → ml, L "discrete" → u null → all units (no restriction)
allowedUnits	opcional	`UnitOption[]`	Explicit unit options. When provided, takes precedence over `family`. Use this to override the family-derived list (e.g. vertical-specific units).
onChange	sí	`(value: string \| null, unit: string) => void`	Called whenever the numeric value or the unit changes. `value` is null when the field is cleared (empty string input).
disabled	opcional	`boolean`	—
placeholder	opcional	`string`	Placeholder for the numeric input. Default: "0"
id	opcional	`string`	HTML id for the numeric input (for <label htmlFor> association).
ariaLabel	opcional	`string`	aria-label for the numeric input. Default: "Cantidad"
size	opcional	`"sm" \| "md"`	—
className	opcional	`string`	—

Ejemplo del paquete

// Unrestricted (all units)
<QuantityUnitField value={qty} unit={unit} onChange={(v, u) => setState(v, u)} />
// Restricted to weight family (g / kg)
<QuantityUnitField value={qty} unit={unit} family="weight" onChange={...} />
// Explicit allowed units
<QuantityUnitField value={qty} unit={unit}
allowedUnits={[{ value: "kg", label: "kg" }]} onChange={...} />

Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.