NumberInput
Numeric input with increment/decrement controls
Parallel jobs per runner. Pro plan caps at 16.
Billed at $12 per seat per month. Current total: $144/mo.
Accessibility
- Pair the control with a visible label or aria-label and keep helper or error text programmatically associated.
- Preserve expected keyboard entry, selection, and state announcements for the chosen input pattern.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<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
ts
import { NumberInput } from '@dryui/ui'Per-component subpath
ts
import { NumberInput } from '@dryui/ui/number-input'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| size | smmdlg Adjusts input density and its default maximum width for compact counter-style fields. | Size preset affecting density, spacing, or typography. | 'md' | — | — |
| value | number | Current controlled or bindable value. | 0 | — | ✓ |
| min | number | Minimum allowed value. | — | — | — |
| max | number | Maximum allowed value. | — | — | — |
| step | number | Step interval used when incrementing numeric values. | 1 | — | — |
| disabled | boolean | Prevents interaction and applies disabled styling. | false | — | — |