CurrencyInput

Overview

CurrencyInput is the shared-ui money field used when the user is entering an amount rather than arbitrary numeric text.

It wraps react-currency-input-field and composes:

Label
formatted currency entry
FieldError

Use it when the value is a monetary amount and should be displayed and edited with currency formatting rather than as a plain number.

Basic Usage

import { CurrencyInput } from '@fsai/shared-ui';

<CurrencyInput
  label="Default Price"
  value={value}
  onChange={setValue}
  onBlur={handleBlur}
/>

Props

Prop	Type	Default	Description
`value`	`number \| string \| null`	—	Current amount.
`onChange`	`(value?: string \| null) => void`	—	Required change handler. Receives the raw numeric string value from the formatter.
`prefix`	`string`	`'$'`	Currency prefix shown in the field.
`placeholder`	`string`	`'1000'`	Placeholder when the field is empty.
`disabled`	`boolean`	—	Disables the field.
`className`	`string`	—	Additional input classes.
`onBlur`	`() => void`	—	Blur handler for form integration or save-on-blur flows.
`error`	`string`	—	Inline validation message rendered with `FieldError`.
`label`	`string`	—	Optional field label rendered with `Label`.

Behavior

CurrencyInput is configured for standard currency entry:

formatted on blur
decimals allowed
maximum two decimal places
full-width field styling matching other form controls

The emitted value is the numeric string from the formatter, so parent code is responsible for parsing or storing it in the desired shape.

Brand Dashboard Usage Patterns

Representative usages:

Pattern	Path	Notes
Menu item price field	`fsai/apps/brand-dashboard/src/modules/menu/components/CreateMenuItemModal/CreateMenuItemModal.tsx`	Canonical labeled form-field usage with `react-hook-form` and validation errors.
Deal fee editing	`fsai/apps/brand-dashboard/src/modules/deals/components/DealOverviewFees.tsx`	Uses `CurrencyInput` as the money branch of a typed fee editor alongside percentage input.
State compliance amount fields	`fsai/apps/brand-dashboard/src/components/StateCompliancePanel/StateCompliancePanelDetails/StateCompliancePanelDetails.components.tsx`	Compact inline money entry inside a larger details workflow.
Catalog pricing	`fsai/apps/brand-dashboard/src/modules/menu/components/CatalogItemAssignmentDetail/CatalogItemAssignmentDetail.tsx`	Money editing inside menu/catalog detail flows.

Important Conventions

Use CurrencyInput for money, not for generic numeric entry.
onChange receives a numeric string value, not a parsed number.
The default prefix is $, but the component allows overriding it when another currency symbol is needed.
CurrencyInput already includes label and error composition, so it usually fits where Input would otherwise be used for a money field.

Guidelines

Do use CurrencyInput when the field represents a monetary amount
Do pair it with external validation when the amount is required or bounded
Do use plain Input type="number" when the value is numeric but not currency
Don't use CurrencyInput for percentages, counts, or arbitrary decimals