Number Input
A number field that is a text field underneath.
Walkthrough
1. Basic
A quantity field. Empty clears to null, so nothing sticks at zero.
<script lang="ts"> import { NumberInput } from 'omaris'; let quantity = $state<number | null>(1);</script><div class="w-64 max-w-full"> <NumberInput label="Quantity" bind:value={quantity} min={1} max={99} /></div>2. Layouts
Where the steppers sit. split is the one to reach for on a phone.
<script lang="ts"> import { NumberInput } from 'omaris'; let trailing = $state<number | null>(1); let split = $state<number | null>(2); let stacked = $state<number | null>(8);</script><div class="flex w-72 max-w-full flex-col gap-4"> <NumberInput label="Trailing" bind:value={trailing} min={0} max={99} /> <NumberInput label="Split" layout="split" emphasis="tonal" bind:value={split} min={1} max={12} /> <NumberInput label="Stacked" layout="stacked" bind:value={stacked} min={0} max={24} /></div>3. Picker
picker opens a wheel instead of a keypad on a touch screen. 'always' shows it here too.
Weight 72 · Guests 2
<script lang="ts"> import { NumberInput, Text } from 'omaris'; let weight = $state<number | null>(72); let guests = $state<number | null>(2);</script><div class="flex max-w-sm flex-col gap-5"> <NumberInput label="Weight" bind:value={weight} min={30} max={200} suffix="kg" picker="always" layout="split" /> <!-- The same prop as a plain `picker`: a keypad on a desktop, a wheel under a thumb. The steppers work either way. --> <NumberInput label="Guests" bind:value={guests} min={1} max={12} picker /> <Text variant="body-sm" tone="muted"> Weight {weight ?? '—'} · Guests {guests ?? '—'} </Text></div>4. Units
Decimals, a unit and grouped thousands. The separator appears when the field is left, so it never moves the caret while you type.
<script lang="ts"> import { NumberInput } from 'omaris'; let weight = $state<number | null>(2.5); let budget = $state<number | null>(12500);</script><div class="flex w-72 max-w-full flex-col gap-4"> <NumberInput label="Weight" bind:value={weight} suffix="kg" precision={1} step={0.5} min={0} /> <NumberInput label="Budget" bind:value={budget} prefix="$" step={500} min={0} /></div>5. Overridden
Every part is reachable: a pill field, round steppers, a monospace value — and the component's own sizing still holds it together.
<script lang="ts"> import { NumberInput } from 'omaris'; let seats = $state<number | null>(2);</script><div class="w-52 max-w-full"> <NumberInput label="Seats" layout="split" emphasis="tonal" bind:value={seats} min={1} max={9} classes={{ field: 'rounded-full', control: 'font-mono', step: 'rounded-full' }} /></div>