Design System: Molecules - Form Field + Amount Input

[DigiBanks99]

Parent PRD

#320

What to build

Build the <mnl-form-field> and <mnl-amount-input> molecule components for form composition.

mnl-form-field

• Wraps any input atom (<mnl-input>, <mnl-select>, <mnl-toggle>) with consistent label + error layout
• Structure: label above → projected input → error message below (conditionally shown)
• Signal inputs: label (string), error (string | null), required (boolean — shows asterisk), hint (string — subtle help text)
• When error is set: passes error state to the projected input (via CSS class or context) and shows red error text below
• Label uses text-xs font-medium positioned above with proper for attribute linking

mnl-amount-input

• Specialized numeric input for monetary values (matches reference image 2's Amount field)
• Structure: currency symbol prefix (R for ZAR) + numeric input + optional currency selector
• Signal inputs: currency (string, default 'ZAR'), placeholder, disabled
• Implements ControlValueAccessor — value is a raw number (not formatted string)
• Focus state highlights the entire compound input with accent border (like the reference pink border)
• Formats display with thousands separators but stores raw number

Storybook: Stories under Molecules/Form Field and Molecules/Amount Input showing label/error/hint states, currency variants.

Acceptance criteria

• <mnl-form-field> renders label above and error below the projected input
• Error text appears only when error input is non-null
• Required asterisk shows when required is true
• Label correctly links to input via for/id attributes for accessibility
• <mnl-amount-input> shows currency prefix and accepts numeric input
• Amount input implements ControlValueAccessor (works with FormControl)
• Amount input displays formatted value but emits raw number
• Both work correctly in dark mode
• Unit tests: form-field shows/hides error, amount-input CVA integration, formatting
• Storybook stories show all states

Blocked by

• Blocked by Design System: Atoms - Input + Select #324 (Input + Select atoms must exist to be projected into form-field)

User stories addressed

• User story 16: Form field wrapper
• User story 22: Amount input with currency
• User story 33: Signal input/output API