Browse docs

NumberField

Numeric input built on Material-UI. Validates as a number automatically, supports min/max/step constraints, and integrates with DashForm without any wiring.

Quick Start

tsx

<NumberField name="price" label="Price" inputProps={{ min: 0, step: 0.01 }} rules={{ required: 'Required' }} />

Examples

A numeric field bound to the form by name.

Amount

<NumberField name="amount" label="Amount" fullWidth />

Decimal input — slotProps.htmlInput forwards native attributes like step.

Price

Enter price with cents

<NumberField
  name="price"
  label="Price"
  placeholder="0.00"
  slotProps={{ htmlInput: { step: 0.01, min: 0 } }}
  helperText="Enter price with cents"
  fullWidth
/>

min / max constrain the native input.

Age

Between 0 and 120

<NumberField
  name="age"
  label="Age"
  helperText="Between 0 and 120"
  slotProps={{ htmlInput: { min: 0, max: 120 } }}
  fullWidth
/>

Error state with helper text.

Quantity

Value must be greater than zero

<NumberField
  name="qty"
  label="Quantity"
  error
  helperText="Value must be greater than zero"
  fullWidth
/>

API

Prop	Type	Default	Description
`name`	`string`	—	Field name. Required.
`label`	`string`	—	Field label.
`helperText`	`string`	—	Hint text below the field.
`placeholder`	`string`	—	Placeholder text.
`inputProps`	`{ min?, max?, step? }`	—	Native input constraints.
`disabled`	`boolean`	`false`	Disables the field.
`error`	`boolean`	`false`	Error visual state.
`fullWidth`	`boolean`	`false`	Fill container width.
`variant`	`'outlined' \| 'filled' \| 'standard'`	`'outlined'`	MUI variant.
`access`	`AccessRequirement`	—	RBAC access requirement. Controls visibility, disabled, and readonly state based on role permissions.
`rules`	`RegisterOptions`	—	React Hook Form validation rules.
`visibleWhen`	`VisibleWhenCondition`	—	Conditional visibility expression.

Notes

Value is stored as number | null in the form state.
inputProps.min/max enforce browser-level constraints; use rules.min/max for RHF validation.

Capabilities

NumberField is purpose-built for numeric input scenarios. It provides built-in validation, boundary enforcement, and proper null handling while maintaining consistency with Material Design patterns.

Consistent Layout System

Core Feature

NumberField inherits MUI TextField variants (outlined, filled, standard) providing a familiar and consistent visual system across all numeric inputs.

Native MUI variant prop support
Consistent with Material Design patterns
Seamless integration with existing forms

tsx

<NumberField
  name="quantity"
  label="Quantity"
  variant="outlined"
/>

Numeric Validation

Built-in

Built-in handling of min/max constraints, step increments, and proper numeric parsing. Stores number | null internally, never allows NaN.

Min/max boundary enforcement via inputProps
Step increment support for precise control
Proper null handling for empty values

tsx

<NumberField
  name="age"
  label="Age"
  inputProps={{ min: 0, max: 120 }}
/>

Reactive Visibility

NumberField can participate in engine-driven visibility rules through visibleWhen. Use it when numeric input depends on other form state.

Conditional rendering via visibleWhen
Engine evaluates the predicate
Useful for dependent numeric fields

tsx

<NumberField
  name="quantity"
  label="Quantity"
  visibleWhen={(engine) =>
    engine.getNode('orderType')?.value === 'bulk'
  }
/>