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.
Walkthrough
1. 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>2. 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>3. 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."/>