NumberInput
Numeric input with increment/decrement controls
Start Here
Start from the smallest working snippet, then move to interactive examples and the full API contract below.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { NumberInput } from '@dryui/ui';
</script>
<NumberInput bind:value={quantity} min={0} max={100} step={1} size="sm" />Import options
Root package
import { NumberInput } from '@dryui/ui'Per-component subpath
import { NumberInput } from '@dryui/ui/number-input'Customize
Use the interactive examples to see common variants, states, and composition patterns before building your own.
Use the smaller sizes for short ranges like counters, passengers, or quantity pickers. The control now stays compact instead of stretching full width by default.
Default
<NumberInput />Min / Max
<NumberInput min={0} max={100} value={50} />Custom Step
<NumberInput step={5} min={0} max={50} />Compact Range
<NumberInput size="sm" min={1} max={9} value={2} />Sizes
<NumberInput size="sm" />
<NumberInput size="md" />
<NumberInput size="lg" />Disabled
<NumberInput disabled value={42} />Bound Value
Quantity: 1
<script lang="ts">
let quantity = $state(1);
</script>
<NumberInput bind:value={quantity} min={1} max={99} />
<p>Quantity: {quantity}</p>Compose
The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Default | Required | Bindable |
|---|---|---|---|---|
value | number | 0 | — | ✓ |
min | number | — | — | — |
max | number | — | — | — |
step | number | — | — | — |
size | smmdlg Adjusts input density and its default maximum width for compact counter-style fields. | 'md' | — | — |
disabled | boolean | — | — | — |
Forwards <input> attributes via rest props. Common examples: name, autocomplete, inputmode. Omitted: size.