Quantity Input

Composite amount-plus-unit input used for menu quantities and ingredient measurements.

Overview

QuantityInput is a composite field for entering:

a numeric amount
a menu unit

It combines InputPrimitive and Picker into a single compact control.

This component is specifically shaped around MenuUnit and MENU_UNITS from @fsai/sdk. It is best treated as a menu-domain component, not a generic amount-plus-unit field.

Basic Usage

<QuantityInput
  amount={quantity}
  unit={unit}
  onChangeAmount={setQuantity}
  onChangeUnit={setUnit}
/>

With react-hook-form

QuantityInput commonly uses two controllers: one for the numeric amount and one for the unit.

<QuantityInput
  amount={quantityField.value}
  onBlur={quantityField.onBlur}
  onChangeAmount={quantityField.onChange}
  onChangeUnit={unitField.onChange}
  unit={unitField.value}
  error={quantityState.error?.message || unitState.error?.message}
/>

This is the production pattern used in IngredientsFieldArray.tsx.

Props

Prop	Type	Default	Description
`amount`	`number \| null`	—	Current numeric amount.
`unit`	`MenuUnit`	—	Required selected unit.
`onChangeAmount`	`(amount: number \| null) => void`	—	Required amount change handler.
`onChangeUnit`	`(unit: MenuUnit) => void`	—	Required unit change handler.
`onBlur`	`() => void`	—	Blur handler for form integration.
`error`	`string`	—	Inline field error text.
`label`	`string`	—	Optional label.
`id`	`string`	—	Input id.
`disabled`	`boolean`	—	Disables both amount and unit interactions.

Important Behavior

an empty numeric input becomes null, not 0
unit selection is driven by MENU_UNITS
the unit picker is embedded inside the same visual field

Brand Dashboard Usage

Pattern	Path	Notes
Menu ingredient field array	`fsai/apps/brand-dashboard/src/modules/menu/components/IngredientsFieldArray/IngredientsFieldArray.tsx`	Dual-controller form integration with merged error handling.
Local-state ingredient usage	`fsai/apps/brand-dashboard/src/modules/menu/components/IngredientPanel/IngredientPanelUsedIn/IngredientPanelUsedIn.tsx`	Same component used outside RHF with local state and blur handling.

Guidelines

Do use QuantityInput for menu-domain quantity-plus-unit entry
Do wire amount and unit separately in form state
Do merge amount and unit validation into one visible error when needed
Don't treat it as a fully generic unit-entry system outside the menu domain without checking whether the menu-unit assumptions still fit