@mantine/core

import React from 'react'; import { NumberFormatValues, OnValueChange } from 'react-number-format'; import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core'; import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input'; export interface NumberInputHandlers { increment: () => void; decrement: () => void; } export type NumberInputMode = 'number' | 'bigint'; export type NumberInputNumericType = number | bigint; export type NumberInputValue<T extends NumberInputNumericType = number> = T | string; type NumberInputNumericValue<T extends NumberInputNumericType = number> = T; export type NumberInputStylesNames = 'controls' | 'control' | __InputStylesNames; export type NumberInputCssVariables = { controls: '--ni-chevron-size'; }; export interface NumberInputProps<T extends NumberInputNumericType = number> extends BoxProps, Omit<__BaseInputProps, 'pointer'>, StylesApiProps<NumberInputFactory>, ElementProps<'input', 'size' | 'type' | 'onChange' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> { /** Controlled component value */ value?: NumberInputValue<T>; /** Uncontrolled component default value */ defaultValue?: NumberInputValue<T>; /** Called when value changes */ onChange?: (value: NumberInputValue<T>) => void; /** Called when value changes with `react-number-format` payload */ onValueChange?: OnValueChange; /** Determines whether leading zeros are allowed during input. If `false`, leading zeros are removed as you type (e.g., typing `007` results in `7`). Works in conjunction with `trimLeadingZeroesOnBlur`. @default true */ allowLeadingZeros?: boolean; /** Determines whether negative numbers are allowed. If `false`, the input will not accept negative values, and the decrement button will stop at `0` (when `min` is not set). @default true */ allowNegative?: boolean; /** Characters which when pressed result in a decimal separator. These characters will be replaced by the `decimalSeparator` in the input value. @default ['.', ','] */ allowedDecimalSeparators?: string[]; /** Limits the number of digits that can be entered after the decimal point @default Infinity */ decimalScale?: number; /** Character used as a decimal separator. Generally used with `allowedDecimalSeparators` prop. @default '.' */ decimalSeparator?: string; /** If `true`, automatically pads the decimal part with zeros to match `decimalScale` (e.g., with `decimalScale={2}`, typing `5.1` displays as `5.10`). Requires `decimalScale` to be set. @default false */ fixedDecimalScale?: boolean; /** Prefix added before the input value */ prefix?: string; /** Suffix added after the input value */ suffix?: string; /** Defines the thousand grouping style. 'thousand' (1,000), 'lakh' (1,00,000), 'wan' (1,0000), 'none'. */ thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none'; /** A function to validate the input value. If this function returns `false`, the `onChange` will not be called and the input value will not change. */ isAllowed?: (values: NumberFormatValues) => boolean; /** Advanced: Set to `true` if you're passing numeric strings (e.g., `"12345"`) and using formatting props like `prefix` or `suffix`. In most cases, you don't need this prop. See [react-number-format docs](https://www.npmjs.com/package/react-number-format) for details. @default false */ valueIsNumericString?: boolean; /** Controls input `type` attribute @default 'text' */ type?: 'text' | 'tel' | 'password'; /** A character used to separate thousands */ thousandSeparator?: string | boolean; /** Minimum possible value */ min?: NumberInputNumericValue<T>; /** Maximum possible value */ max?: NumberInputNumericValue<T>; /** Number by which value will be incremented/decremented with up/down controls and keyboard arrows @default 1 */ step?: NumberInputNumericValue<T>; /** If set, the up/down controls are hidden @default false */ hideControls?: boolean; /** Controls how values are clamped to the `min`/`max` range: * - `'blur'` (default): User can type any value, but it's clamped when the input loses focus * - `'strict'`: User cannot type values outside the range * - `'none'`: No clamping; `min`/`max` only apply to increment/decrement controls and arrow keys */ clampBehavior?: 'strict' | 'blur' | 'none'; /** If set, decimal values are allowed @default true */ allowDecimal?: boolean; /** Increment/decrement handlers */ handlersRef?: React.Ref<NumberInputHandlers | undefined>; /** Value used when incrementing/decrementing an empty input. If `min` is set and `startValue < min`, `min` is used instead. @default 0 */ startValue?: NumberInputNumericValue<T>; /** Interval in milliseconds between value steps when increment/decrement button is held down. Can be a number or a function `(stepCount) => number` for dynamic intervals. Requires `stepHoldDelay` to be set. @default undefined */ stepHoldInterval?: number | ((stepCount: number) => number); /** Initial delay in milliseconds before stepping the value. */ stepHoldDelay?: number; /** If set, up/down keyboard events increment/decrement value @default true */ withKeyboardEvents?: boolean; /** If set, leading zeros are removed on blur. For example, `00100` -> `100` @default true */ trimLeadingZeroesOnBlur?: boolean; /** If set, all text is selected when the input receives focus @default false */ selectAllOnFocus?: boolean; /** Called when the increment button or arrow up key is pressed and the value has reached the maximum */ onMinReached?: () => void; /** Called when the decrement button or arrow down key is pressed and the value has reached the minimum */ onMaxReached?: () => void; } export type NumberInputFactory = Factory<{ props: NumberInputProps; ref: HTMLInputElement; stylesNames: NumberInputStylesNames; vars: NumberInputCssVariables; variant: InputVariant; signature: <T extends NumberInputNumericType = number>(props: NumberInputProps<T>) => React.JSX.Element; }>; export declare const NumberInput: (<T extends NumberInputNumericType = number>(props: NumberInputProps<T>) => React.JSX.Element) & import("../..").ThemeExtend<{ props: NumberInputProps; ref: HTMLInputElement; stylesNames: NumberInputStylesNames; vars: NumberInputCssVariables; variant: InputVariant; signature: <T extends NumberInputNumericType = number>(props: NumberInputProps<T>) => React.JSX.Element; }> & import("../..").ComponentClasses<{ props: NumberInputProps; ref: HTMLInputElement; stylesNames: NumberInputStylesNames; vars: NumberInputCssVariables; variant: InputVariant; signature: <T extends NumberInputNumericType = number>(props: NumberInputProps<T>) => React.JSX.Element; }> & Record<string, never> & { varsResolver: import("../..").VarsResolver<{ props: NumberInputProps; ref: HTMLInputElement; stylesNames: NumberInputStylesNames; vars: NumberInputCssVariables; variant: InputVariant; signature: <T extends NumberInputNumericType = number>(props: NumberInputProps<T>) => React.JSX.Element; }>; } & import("../..").FactoryComponentWithProps<{ props: NumberInputProps; ref: HTMLInputElement; stylesNames: NumberInputStylesNames; vars: NumberInputCssVariables; variant: InputVariant; signature: <T extends NumberInputNumericType = number>(props: NumberInputProps<T>) => React.JSX.Element; }> & { displayName?: string; }; export {};