Amount Field

A labeled Number Input inside a Field card. Use it alone for a single amount (cash, shares, limit price). Pair two ends with DualAmountControl when the user can size in cash or shares — hero switcher (one field + pill) or connected (both fields, mid swap). The pill names the other mode: Buy in shares / Buy in cash.

Usage

import { AmountField, DualAmountControl } from "@sophic/portal-ui";

<AmountField
  label="Amount to invest"
  format="currency"
  prefix="€"
  value={amount}
  onValueChange={(next) => setAmount(next.value)}
  onClear={() => setAmount("")}
  size="hero"
/>;

<DualAmountControl
  layout="hero-mode-switch"
  rate={1 / 703.4}
  cashLabel="Amount to invest"
  modeSwitchVerb="Buy"
  onChange={({ amount, sizeMode }) => {
    setAmount(amount);
    setSizeMode(sizeMode);
  }}
/>;

rate is always cash→units (e.g. 1 / price). Last-edited side is source; the Buy in shares / Buy in cash pill clears both fields so quotes do not carry across modes.

Props

Changelog

• 26 September 2026 — Removed the limit-versus-market chip. Full notes
• 15 August 2026 — Hero switcher pill says Buy in shares / Buy in cash. Full notes
• 14 August 2026 — Added Amount Field and DualAmountControl. Full notes