NumberInput

Use min, max, and step to constrain the value. onValueChange reports the string value and parsed number.

import { NumberInput } from '@manti-ui/react';

export default function NumberInputBasic() {
  return (
    <NumberInput
      label="Servings"
      variant="primary"
      defaultValue="12"
      min={0}
      max={99}
      step={1}
    />
  );
}

Sizes

Small

Medium

Large

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional field label.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`variant`	`MantiVariant`	`'primary'`	Focus-ring variant.
`value`	`string`	—	Controlled value, mirroring the input string.
`defaultValue`	`string`	—	Initial value for uncontrolled usage.
`onValueChange`	`(value: string, valueAsNumber: number) => void`	—	Called whenever the value changes.
`min`	`number`	—	Minimum allowed value.
`max`	`number`	—	Maximum allowed value.
`step`	`number`	—	Increment/decrement step.
`allowMouseWheel`	`boolean`	—	Allow the mouse wheel to change the value while focused.
`invalid`	`boolean`	—	Mark the field as invalid.
`disabled`	`boolean`	—	Disable the control.
`readOnly`	`boolean`	—	Make the field read-only.
`rootProps / inputProps`	`HTMLAttributes / InputHTMLAttributes`	—	Props for the wrapper and actual numeric input, including ARIA and data attributes.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="number-input"][data-part="root"]`	The field wrapper carrying scope, size, variant, and state.
`label`	`[data-scope="number-input"][data-part="label"]`	Optional label above the control.
`control`	`[data-scope="number-input"][data-part="control"]`	The framed group holding the input and the two triggers.
`input`	`[data-scope="number-input"][data-part="input"]`	The text input that reflects the numeric value.
`decrement-trigger`	`[data-scope="number-input"][data-part="decrement-trigger"]`	Button that steps the value down.
`increment-trigger`	`[data-scope="number-input"][data-part="increment-trigger"]`	Button that steps the value up.

Tokens

Token	Controls
`--manti-number-input-height`	height
`--manti-number-input-stepper-width`	stepper width
`--manti-number-input-radius`	radius

Last updated 13 September 2026