NumberField

A numeric input with increment/decrement buttons, supporting min/max constraints, step values, and controlled/uncontrolled modes.

Basic

Min / Max

Custom Step

Controlled

With Error

Prefix & Suffix

Add currency symbols, units, or other indicators before or after the value.

Currency Input

A controlled payment input with a dollar prefix.

Sizes

Colors

Props

Prop	Type	Default	Description
`value`	`number`	—	The current value (controlled).
`defaultValue`	`number`	—	The initial value (uncontrolled).
`onValueChange`	`(value: number) => void`	—	Called when the value changes.
`min`	`number`	—	The minimum allowed value.
`max`	`number`	—	The maximum allowed value.
`step`	`number`	`1`	The increment/decrement step for the +/- buttons.
`label`	`string`	—	Label text displayed above the input.
`error`	`string`	—	Error message displayed below the input.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus ring and buttons.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset.
`prefix`	`ReactNode`	—	Content displayed before the value (e.g. "$", "€").
`suffix`	`ReactNode`	—	Content displayed after the value (e.g. "%", "kg").
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

number

The current value (controlled).

defaultValue

number

The initial value (uncontrolled).

onValueChange

(value: number) => void

Called when the value changes.

min

number

The minimum allowed value.

max

number

The maximum allowed value.

step1

number

The increment/decrement step for the +/- buttons.

label

string

Label text displayed above the input.

error

string

Error message displayed below the input.

color"blue"

Accent color for focus ring and buttons.

size"md"

"sm" | "md" | "lg"

Size preset.

prefix

ReactNode

Content displayed before the value (e.g. "$", "€").

suffix

ReactNode

Content displayed after the value (e.g. "%", "kg").

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}