formsinput-number

InputNumber

Numeric input with increment and decrement controls, step, and min/max constraints.

Import#

import { InputNumber } from 'moraine'

Slot Structure#

Numeric input with increment/decrement controls placed inline (horizontal) or stacked (vertical).

Horizontal#

root
├── decrement (optional)
├── input
└── increment (optional)

Vertical#

root
├── input
└── controls
    ├── increment (optional)
    └── decrement (optional)

Examples#

Variants#

Visual style variants for the input shell.

1
function Variants() {
2
  const VARIANTS = ['outline', 'subtle', 'ghost', 'none'] as const
3

4
  return (
5
    <div class="flex flex-wrap gap-6 items-start">
6
      <For each={VARIANTS}>
7
        {(variant) => (
8
          <div class="space-y-1">
9
            <label class="text-xs text-muted-foreground block">{variant}</label>
10
            <InputNumber variant={variant} defaultValue={3} />
11
          </div>
12
        )}
13
      </For>
14
    </div>
15
  )
16
}

Sizes#

Size scale from xs to xl for input height and control rail sizing.

1
function Sizes() {
2
  const SIZES: InputNumberSize[] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  return (
5
    <div class="max-w-md space-y-3">
6
      <For each={SIZES}>
7
        {(size) => (
8
          <div class="space-y-1">
9
            <p class="text-xs text-muted-foreground font-mono">{size}</p>
10
            <InputNumber size={size} defaultValue={3} />
11
          </div>
12
        )}
13
      </For>
14
    </div>
15
  )
16
}

Orientations#

Horizontal (default) and vertical button layouts.

1
function Orientations() {
2
  return (
3
    <div class="flex flex-wrap gap-6 items-start">
4
      <div class="space-y-1">
5
        <label class="text-xs text-muted-foreground block">Horizontal</label>
6
        <InputNumber defaultValue={5} minValue={0} maxValue={20} />
7
      </div>
8
      <div class="space-y-1">
9
        <label class="text-xs text-muted-foreground block">Vertical</label>
10
        <InputNumber orientation="vertical" defaultValue={5} minValue={0} maxValue={20} />
11
      </div>
12
    </div>
13
  )
14
}

Controlled#

Value bound to a signal with live readout.

1
function Controlled() {
2
  const [controlledValue, setControlledValue] = createSignal(10)
3

4
  return (
5
    <div class="max-w-xs space-y-2">
6
      <InputNumber
7
        value={controlledValue()}
8
        onRawValueChange={(v) => {
9
          if (Number.isFinite(v)) {
10
            setControlledValue(v)
11
          }
12
        }}
13
        minValue={0}
14
        maxValue={99}
15
        variant="subtle"
16
      />
17
      <p class="text-xs text-muted-foreground">Current value: {controlledValue()}</p>
18
    </div>
19
  )
20
}

Disabled#

Non-interactive disabled state.

Long Press#

Press and hold increment or decrement to continuously step the value. Set holdRepeat={false} to disable the repeat behavior.

1
function LongPress() {
2
  const [repeatValue, setRepeatValue] = createSignal(12)
3
  const [singleStepValue, setSingleStepValue] = createSignal(12)
4

5
  return (
6
    <div class="max-w-xs space-y-4">
7
      <div class="space-y-2">
8
        <InputNumber
9
          value={repeatValue()}
10
          onRawValueChange={(value) => {
11
            if (Number.isFinite(value)) {
12
              setRepeatValue(value)
13
            }
14
          }}
15
          minValue={0}
16
          maxValue={99}
17
          step={1}
18
          variant="subtle"
19
        />
20
        <p class="text-xs text-muted-foreground">
21
          Hold <span class="font-medium">+</span> or <span class="font-medium">−</span> to repeat.
22
          Current value: {repeatValue()}
23
        </p>
24
      </div>
25

26
      <div class="space-y-2">
27
        <InputNumber
28
          value={singleStepValue()}
29
          holdRepeat={false}
30
          onRawValueChange={(value) => {
31
            if (Number.isFinite(value)) {
32
              setSingleStepValue(value)
33
            }
34
          }}
35
          minValue={0}
36
          maxValue={99}
37
          step={1}
38
          variant="subtle"
39
        />
40
        <p class="text-xs text-muted-foreground">
41
          Set <code>holdRepeat=false</code> to keep press-and-hold at a single step. Current value:{' '}
42
          {singleStepValue()}
43
        </p>
44
      </div>
45
    </div>
46
  )
47
}

Min / Max / Step#

Constrained ranges and custom step increments.

1
function MinMaxStep() {
2
  return (
3
    <div class="flex flex-wrap gap-6 items-start">
4
      <div class="space-y-1">
5
        <label class="text-xs text-muted-foreground block">Step 5 (0–100)</label>
6
        <InputNumber defaultValue={25} minValue={0} maxValue={100} step={5} />
7
      </div>
8
      <div class="space-y-1">
9
        <label class="text-xs text-muted-foreground block">Step 0.1 (0–1)</label>
10
        <InputNumber defaultValue={0.5} minValue={0} maxValue={1} step={0.1} />
11
      </div>
12
    </div>
13
  )
14
}

API Reference#

Attributes#

Slotroot4 attributes

Number input wrapper that owns the input and step controls.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.
data-size	Stores the resolved size variant.
data-variant	Stores the resolved visual variant.

ARIA Attributes

ARIA Attribute	Description
role	Defines the semantic role exposed to assistive technology.

Props#

Prop	Type	Default	Description
autofocus	`boolean \| undefined`	`false`	Whether to automatically focus the input on mount.
autofocusDelay	`number \| undefined`	`0`	Delay in milliseconds before focusing the input.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`InputNumberT.Classes \| undefined`	—	—
decrement	`boolean \| undefined`	`true`	Whether to show the decrement button.
decrementDisabled	`boolean \| undefined`	—	Whether the decrement button is disabled.
decrementIcon	`IconT.Name`	`orientation === 'vertical' ? 'icon-chevron-down' : 'icon-minus`	Icon for the decrement button.
defaultValue	`string \| number \| undefined`	—	Default displayed value for uncontrolled usage.
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
holdRepeat	`boolean \| undefined`	`true`	Whether press-and-hold should trigger repeated value changes.
id	`string \| undefined`	—	The ID of the input element.
increment	`boolean \| undefined`	`true`	Whether to show the increment button.
incrementDisabled	`boolean \| undefined`	—	Whether the increment button is disabled.
incrementIcon	`IconT.Name`	`orientation === 'vertical' ? 'icon-chevron-up' : 'icon-plus`	Icon for the increment button.
largeStep	`number \| undefined`	`step * 10`	The step size used for PageUp/PageDown.
locale	`string \| undefined`	—	Locale for number formatting and parsing. Uses browser default if not specified.
maxValue	`number \| undefined`	—	Maximum allowed numeric value.
minValue	`number \| undefined`	—	Minimum allowed numeric value.
name	`string \| undefined`	—	The name of the input element, used for form submission.
onBlur	`JSX.FocusEventHandlerUnion<HTMLInputElement, FocusEvent> \| undefined`	—	Callback when the input loses focus.
onChange	`((value: string) => void) \| undefined`	—	Callback when the formatted string value changes.
onDecrementClick	`JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> \| undefined`	—	Callback when the decrement button is clicked.
onFocus	`JSX.FocusEventHandlerUnion<HTMLInputElement, FocusEvent> \| undefined`	—	Callback when the input gains focus.
onIncrementClick	`JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> \| undefined`	—	Callback when the increment button is clicked.
onRawValueChange	`((value: number) => void) \| undefined`	—	Callback when the numeric value changes.
orientation	`InputNumberOrientation \| undefined`	`horizontal`	The orientation of the control buttons.
placeholder	`string \| undefined`	—	Placeholder text for the input.
rawValue	`number \| undefined`	—	Controlled numeric value. Takes precedence over `value`.
readOnly	`boolean \| undefined`	`false`	Whether the input is read-only.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
repeatDelayMs	`number \| undefined`	`500`	Delay in milliseconds before repeated value changes start.
repeatIntervalMs	`number \| undefined`	`80`	Interval in milliseconds between repeated value changes.
repeatPointerTypes	`"all" \| PointerType \| undefined`	`all`	Pointer types that can trigger press-and-hold repeat.
repeatThrottleMs	`number \| undefined`	`0`	Minimum elapsed time in milliseconds between repeat triggers.
required	`boolean \| undefined`	`false`	Whether the input is required.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
step	`number \| undefined`	`1`	The increment/decrement step size.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`InputNumberT.Styles \| undefined`	—	—
value	`string \| number \| undefined`	—	Controlled displayed value.
variant	`"none" \| "outline" \| "ghost" \| "subtle" \| undefined`	—	—
wheel	`boolean \| undefined`	`false`	Whether mouse wheel changes the value while the input is focused.