components

Input Number

Number input allows users to enter and adjust numeric values. It includes built-in stepper controls for incrementing and decrementing, and supports minimum/maximum bounds, step increments, and disabled or read-only states.

Import

import { InputNumber } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Collect numeric values like quantities, prices, or measurements.
+When increment/decrement controls aid data entry.

When not to use

−For phone numbers or ZIP codes — use InputText with appropriate pattern.
−For date/time values — use InputDate or InputTime.

Examples

Code Samples

Default

A basic number input with a label and value.

import { InputNumber } from "@skedulo/breeze-ui-react";

export default function DefaultNumber() {
  return (
    <InputNumber
      name="quantity"
      label="Quantity"
      value={1}
    />
  );
}

With Placeholder

A number input with placeholder text shown when empty.

import { InputNumber } from "@skedulo/breeze-ui-react";

export default function NumberWithPlaceholder() {
  return (
    <InputNumber
      name="age"
      label="Age"
      placeholder="Enter your age"
    />
  );
}

With Min/Max Range

A number input constrained to a minimum and maximum value with a defined step.

import { InputNumber } from "@skedulo/breeze-ui-react";

export default function NumberWithRange() {
  return (
    <InputNumber
      name="rating"
      label="Rating (1-10)"
      value={5}
      min={1}
      max={10}
      step={1}
    />
  );
}

With Decimal Step

A number input that increments in decimal steps, useful for currency or precision values.

import { InputNumber } from "@skedulo/breeze-ui-react";

export default function NumberWithDecimalStep() {
  return (
    <InputNumber
      name="price"
      label="Price"
      value={9.99}
      min={0}
      step={0.01}
    />
  );
}

Without Stepper

A number input with the stepper controls hidden, using hasNoStepper.

import { InputNumber } from "@skedulo/breeze-ui-react";

export default function NumberWithoutStepper() {
  return (
    <InputNumber
      name="year"
      label="Year"
      value={2026}
      hasNoStepper
    />
  );
}

Disabled

A disabled number input that cannot be edited.

import { InputNumber } from "@skedulo/breeze-ui-react";

export default function DisabledNumber() {
  return (
    <InputNumber
      name="disabled-number"
      label="Disabled Field"
      value={42}
      disabled
    />
  );
}

Read Only

A read-only number input. The value is visible but cannot be changed by the user.

import { InputNumber } from "@skedulo/breeze-ui-react";

export default function ReadOnlyNumber() {
  return (
    <InputNumber
      name="total-items"
      label="Total Items"
      value={128}
      readonly
    />
  );
}

Guidelines

Do

✓Set appropriate min, max, and step values.
✓Use label and error props for validation.

Don't

✗Don't use for non-numeric identifiers (phone, ZIP).
✗Don't allow negative values when they don't make sense.

API Reference

Prop	Type	Default	Description
name*	string	—	The name attribute for the input element, used for form submission and accessibility.
label	string	—	A visible label displayed above the number input.
placeholder	string	—	Hint text displayed when the input is empty.
value	number	—	The current numeric value of the input.
min	number	—	The minimum allowed value.
max	number	—	The maximum allowed value.
step	number	1	The increment or decrement step when using the stepper controls or arrow keys.
disabled	boolean	false	Prevents user interaction and applies a disabled visual style.
readonly	boolean	false	Makes the input read-only. The value is visible and selectable but cannot be changed.
hasNoStepper	boolean	false	Hides the increment/decrement stepper controls, showing only the numeric input field.
onChange	(value: number) => void	—	Callback fired when the numeric value changes.

Related Components

Input Text InputDate InputTime