Skip to content
omaris

Inputs

Price Input

A money field: the currency decides the symbol, which side it sits on, how many decimals are allowed and how much one step is worth.

import { PriceInput } from 'omaris'
Learn

Examples

Basic

The currency decides the symbol, which side it sits on, and how many decimals are allowed. The value stays a number, so nothing downstream has to parse a formatted string back.

Value: 25000

<script lang="ts">	import { PriceInput } from 'omaris';​	let price = $state(25000);</script>​<div class="flex w-72 max-w-full flex-col gap-2">	<PriceInput label="Price" bind:value={price} />	<p class="text-body-sm text-muted-foreground">		Value: <code class="text-foreground">{price ?? 'null'}</code>	</p></div>

Currencies and presets

IQD has no minor unit, so it takes no decimals and steps in thousands; USD takes two. Switching the currency switches all of that at once.

<script lang="ts">	import { PriceInput } from 'omaris';​	let iqd = $state(50000);	let usd = $state(19.99);	let tip = $state<number | null>(null);</script>​<div class="flex w-full max-w-md flex-col gap-5">	<PriceInput label="In IQD" currency="IQD" bind:value={iqd} />	<PriceInput label="In USD" currency="USD" bind:value={usd} />	<PriceInput label="Tip" currency="USD" presets={[1, 2, 5]} bind:value={tip} /></div>

Limits

clamp pulls an out-of-range value back on blur rather than rejecting it — for a discount that cannot exceed the price, or a tip with a floor.

Between $10 and $1,000. 
<script lang="ts">	import { PriceInput } from 'omaris';​	let amount = $state(500);</script>​<PriceInput	class="w-72 max-w-full"	label="Withdrawal"	currency="USD"	min={10}	max={1000}	bind:value={amount}	supportingText="Between $10 and $1,000."/>

When to use it

Use it for

  • An amount of money: a menu price, a tip, a budget, a payout. value is a number, null when empty, so nothing downstream parses a string.
  • More than one currency. Pass currencies and the picker appears; rates and secondary draw the "≈ $12.50" line under an IQD amount.
  • One-tap amounts. presets for a tip, a top-up, a donation.
  • A bounded amount. min, max and clamp pull a wild value back on blur instead of refusing the keystroke.

Not for

  • A quantity, a percentage or a weight → Text Field with format="integer", percent or decimal and a suffix.
  • An amount chosen from a range by feel → Slider.
  • A price on a card or a total in a table → Text. Format it with Intl.NumberFormat and the same currency code.
  • A number with no currency → Text Field with format="decimal".

Do

  • Let the currency set the decimals and the step. IQD takes none and steps in thousands; USD takes two. Set step only when the business rule is stricter.
  • Keep presets in the current currency, in round amounts people pay.
  • Give it a name in a plain <form>. The raw number is posted, not the formatted text.
  • Replace the approximation line with hint when there is something more useful to say: the fee, the balance after.

Don't

  • Show the currency picker for one currency. Pass a single entry in currencies and it becomes a label.
  • Mix currencies in one form without rates. Two amounts in different units cannot be compared.
  • Round value for display and store the rounded one. value is what was typed; formatting belongs to the field.
Pairs with Text Field Select Phone Input Slider Table

API

PriceInput

A money field: the currency decides the symbol, which side it sits on, how many decimals are allowed and how much one step is worth.

The value stays a number, so nothing downstream has to parse a formatted string back.

import { PriceInput } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
Wrapper: label, field, supporting text.
field
The frame: border, background, height, adornment layout.
control
The bare <input>; the frame owns every decoration.
label
No description in the source yet.
adornment
Icon slots at either end of the frame.
affix
Flat text glued to the value — "https://", "kg".
action
An interactive trailing control: reveal, clear.
support
Helper line under the field, and the counter beside it.
counter
No description in the source yet.

Props

value bindable

Defaults to null

number | null

The amount, as a number. Bindable, and null when the field is empty.

currency bindable

Defaults to 'IQD'

string

Selected currency code. Bindable.

currencies

Defaults to DEFAULT_CURRENCIES

Currency[]

Currencies offered. More than one renders the picker.

variant

Defaults to 'outline'

InputVariant
size

Defaults to 'default'

InputSize
label
string

Label above the field.

supportingText
string

Helper line. Replaced by the error text when invalid.

min
number
max
number
step
number

Arrow-key increment. Defaults to the currency's own step.

clamp

Defaults to true

boolean

Snap the value into [min, max] when the field is left.

presets
number[]

One-tap amounts under the field, in the current currency.

rates
Record<string

Value of one unit of each currency in a shared base, keyed by code — { IQD: 1, USD: 1310 }. Drives the approximate second amount.

secondary
string

Code the approximation is shown in. Hidden when it's the active one.

invalid
boolean

Inside a Field, defaults to the field's.

disabled
boolean

Inside a Field, defaults to the field's.

readonly

Defaults to false

boolean
required
boolean

Inside a Field, defaults to the field's.

placeholder

Defaults to '0'

string
id
string
name
string

Posts the raw number (not the formatted text) under this name.

aria-describedby
string
hint
Snippet

Replaces the built-in approximation line.

class
string
classes
InputClasses

Per-part Tailwind overrides, forwarded to the Input underneath.

ref bindable

Defaults to null

HTMLInputElement | null