Money input

Introduction

MoneyInput is a TextInput subclass that defaults to type="number", .step("0.01"), .input_mode("decimal"), and a $ prefix. .currency(code) swaps the prefix for known codes (USD, EUR, GBP, KES) or "CODE " for unknown codes, and sets data-currency. Optional .locale() adds data-locale for client formatting. The field class becomes or-field-MoneyInput.

Each variation below includes a detailed explanation, the fluent API to paste into your schema, and light/dark screenshots of the rendered control.

USD

Default currency chrome uses $ and USD metadata — ideal for dollar amounts.

MoneyInput.make('price')
    .label('Price')
    .currency('USD')
    .required()

Orbit USD (light)

Orbit USD (dark)

EUR

.currency('EUR') switches the prefix to € and updates data-currency.

MoneyInput.make('price')
    .label('Price')
    .currency('EUR')

Orbit EUR (light)

Orbit EUR (dark)

Locale metadata

.locale('en_US') emits data-locale for host/client formatters without changing the numeric dehydrate value.

MoneyInput.make('budget')
    .label('Budget')
    .currency('GBP')
    .locale('en_GB')

Orbit Locale metadata (light)

Orbit Locale metadata (dark)

Validation and bounds

Use .min_value() / .max_value() / .between() for amount ranges. Inherited TextInput helpers (prefix override, disabled, live) still apply after .currency().

MoneyInput.make('deposit')
    .label('Deposit')
    .currency('USD')
    .min_value(0)
    .max_value(10000)
    .step(0.01)

Orbit Validation and bounds (light)

Orbit Validation and bounds (dark)

Closures work on .label(), .helper_text(), .placeholder(), .visible(), .disabled(), and .required() where applicable — see Form closures.