---
title: InputNumber
description: Numeric input with increment and decrement controls, step, and min/max constraints.
sidebar:
order: 5
search:
tags: [number, stepper, spinbutton, numeric]
---
# InputNumber
> Numeric input with increment and decrement controls, step, and min/max constraints.
## Import
```tsx
import { InputNumber } from 'moraine'
```
## Slot Structure
Numeric input with increment/decrement controls placed inline (horizontal) or stacked (vertical).
### Horizontal
```text
root
├── decrement (optional)
├── input
└── increment (optional)
```
### Vertical
```text
root
├── input
└── controls
├── increment (optional)
└── decrement (optional)
```
## Examples
### Variants
Visual style variants for the input shell.
```tsx
function Variants() {
const VARIANTS = ['outline', 'subtle', 'ghost', 'none'] as const
return (
{(variant) => (
)}
)
}
```
### Sizes
Size scale from `xs` to `xl` for input height and control rail sizing.
```tsx
function Sizes() {
const SIZES: InputNumberSize[] = ['xs', 'sm', 'md', 'lg', 'xl']
return (
{(size) => (
{size}
)}
)
}
```
### Orientations
Horizontal (default) and vertical button layouts.
```tsx
function Orientations() {
return (
)
}
```
### Controlled
Value bound to a signal with live readout.
```tsx
function Controlled() {
const [controlledValue, setControlledValue] = createSignal(10)
return (
)
}
```
### Disabled
Non-interactive disabled state.
```tsx
function Disabled() {
return
}
```
### Long Press
Press and hold increment or decrement to continuously step the value. Set `holdRepeat={false}` to disable the repeat behavior.
```tsx
function LongPress() {
const [repeatValue, setRepeatValue] = createSignal(12)
const [singleStepValue, setSingleStepValue] = createSignal(12)
return (