Data Entryduskmoonimplemented8 demos

InputNumber

InputNumber captures bounded numeric values with step controls.

Import@duskmoon-dev/components/input-number

4API sections

16documented props

6behavior scenarios

Key API

valuedefaultValueminmaxstepprecision

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

InputNumber is most often configured through `value`, `defaultValue`, `min`, `max`.

Covered behavior

Renders value, status, size, and classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and InputNumber from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { InputNumber } from "@duskmoon-dev/components/input-number";

export function Example() {
  return (<InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>);
}

Preview

Renders value, status, size, and classes

test-backed

InputNumber scenario from the component test coverage: renders value, status, size, and classes.

Source

import "@duskmoon-dev/components/styles.css";
import { InputNumber } from "@duskmoon-dev/components/input-number";

export function InputNumberRendersValueStatusSizeDemo() {
  return (<InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>);
}

Preview

Supports uncontrolled changes with parser and precision

test-backed

InputNumber scenario from the component test coverage: supports uncontrolled changes with parser and precision.

Source

import "@duskmoon-dev/components/styles.css";
import { InputNumber } from "@duskmoon-dev/components/input-number";

export function InputNumberSupportsUncontrolledChangesWithDemo() {
  return (<InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>);
}

Preview

Supports min/max and controls

test-backed

InputNumber scenario from the component test coverage: supports min/max and controls.

Source

import "@duskmoon-dev/components/styles.css";
import { InputNumber } from "@duskmoon-dev/components/input-number";

export function InputNumberSupportsMinMaxAndDemo() {
  return (<InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>);
}

Preview

Supports keyboard stepping and onStep

test-backed

InputNumber scenario from the component test coverage: supports keyboard stepping and onstep.

Source

import "@duskmoon-dev/components/styles.css";
import { InputNumber } from "@duskmoon-dev/components/input-number";

export function InputNumberSupportsKeyboardSteppingAndDemo() {
  return (<InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>);
}

Preview

Can hide controls and disable keyboard

test-backed

InputNumber scenario from the component test coverage: can hide controls and disable keyboard.

Source

import "@duskmoon-dev/components/styles.css";
import { InputNumber } from "@duskmoon-dev/components/input-number";

export function InputNumberCanHideControlsAndDemo() {
  return (<InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>);
}

Preview

Includes component stylesheet rules

test-backed

InputNumber scenario from the component test coverage: includes component stylesheet rules.

Source

import "@duskmoon-dev/components/styles.css";
import { InputNumber } from "@duskmoon-dev/components/input-number";

export function InputNumberIncludesComponentStylesheetRulesDemo() {
  return (<InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>
</div>

<div data-theme="moonlight">
  <InputNumber
  defaultValue={24}
  min={0}
  max={100}
  step={1}
  status="success"
/>
</div>

API

The API reference below lists every parsed exported type or interface for InputNumber. Start with `value`, `defaultValue`, `min`, `max` for common usage.

Types: packages/components/src/components/input-number/InputNumber.types.tsScenarios: packages/components/src/components/input-number/InputNumber.test.tsx

Prop	Type	Required	Description
`value`	`InputNumberValue`	No	value configures InputNumber.
`defaultValue`	`InputNumberValue`	No	defaultValue configures InputNumber.
`min`	`number`	No	min configures InputNumber.
`max`	`number`	No	max configures InputNumber.
`step`	`number`	No	step configures InputNumber.
`precision`	`number`	No	precision configures InputNumber.
`formatter`	`(value: InputNumberValue) => string`	No	formatter configures InputNumber.
`parser`	`(displayValue: string) => InputNumberValue`	No	parser configures InputNumber.
`controls`	`boolean`	No	controls configures InputNumber.
`keyboard`	`boolean`	No	keyboard configures InputNumber.
`status`	`InputNumberStatus`	No	status configures InputNumber.
`size`	`InputNumberSize`	No	size configures InputNumber.
`onChange`	`(value: InputNumberValue) => void`	No	onChange configures InputNumber.
`onStep`	`(`	No	onStep configures InputNumber.
`value`	`InputNumberValue,`	Yes	value configures InputNumber.
`info`	`{ offset: number; type: "up" \| "down" },`	Yes	info configures InputNumber.

InputNumberValuetype

number | null

InputNumberSizetype

"sm" | "md" | "lg"

InputNumberStatustype

"error" | "success"