Asset

@get-asset/react

Receipts Threshold

Drop-in styled settings row for the receipt-request rule: the label and its explanation on the left, the money threshold and an on/off switch on the right. You own the setting — pass the current amount and enabled, and persist what comes back through onAmountChange / onEnabledChange. Nothing is fetched or saved for you.

Built on the headless ReceiptsThreshold compound from @get-asset/sdk.

Preview

Loading preview…

API reference

Root props

PropTypeDefaultDescription
titlerequiredstring—The row's label, e.g. "Auto-request Receipts". Renders as a heading.
subtitlerequiredstring—The muted line under the label explaining what the threshold does.
amountrequirednumber—The threshold, in whole currency units. Seeds the field and adopts every later change, so the row works controlled or uncontrolled.
enabledrequiredboolean—Whether the rule is on — the setting's own value. Same controlled/uncontrolled handling as amount. While off, the threshold field dims and goes inert, but the switch stays live so the rule can be turned back on. See States.
onAmountChange(amount: number) => void—Called with the committed threshold — on blur or Enter, not per keystroke, and only when the value actually moved.
onEnabledChange(enabled: boolean) => void—Called when the switch flips.
currencyrequiredstring—ISO-4217 code the threshold is denominated in — printed as the field's leading label, and the source of the sign in front of the amount ("$" for USD and CAD, "€" for EUR, "¥" for JPY).
disabledboolean—Make the whole row inert, switch included (e.g. while the setting saves). Independent of enabled: the row freezes at whichever position the switch is already in. See States.
formatAmount(amount: number, currency: string) => string—Override the resting display of the threshold.
parseAmount(text: string) => number | null—Override how a typed threshold is read back. Return null to reject the draft and revert the field.
classNamestring—Forwarded to the card.

States

OnThe rule is live: the threshold is editable and the switch flips it off.

Loading preview…

Offenabled={false} — the rule is switched off, so the threshold dims and stops accepting input. The switch is still live.

Loading preview…

Disableddisabled — the whole row is frozen at its current setting: neither the threshold nor the switch responds.

Loading preview…

Behavior notes

  • The field prints money at rest and swaps to the bare number on focus. Enter or blur commits; Escape reverts the draft.
  • The sign in front of the amount comes from currency, in its plain form — a CAD threshold reads “$30.00”, not “CA$30.00”, since the ISO code is already printed beside it. Decimals follow the currency: cents for USD, none for JPY.
  • Zero is a real threshold — “ask me every time” — not an empty field, so it commits like any other value.
  • While the switch is off the threshold field dims and stops accepting input: a rule that never fires has no threshold to set. The switch itself stays live — enabled is the setting, disabled is whether the row can be touched at all.
  • Below ~420px of row width the layout changes shape: the switch comes up beside the title — it's the row's main control, and shouldn't wait below three lines of explanation — while the subtitle and the threshold field take the full width underneath. The row measures itself, not the viewport, so it reflows correctly in a narrow column on a wide page.