@syncfusion/react-inputs/src/numeric-textbox/numeric-textbox.d.ts

Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form, designed to capture user input in React applications.

import { LabelMode, inputBaseProps } from '../common/inputbase';
import { Variant, Size } from '@syncfusion/react-base';
export { LabelMode, Variant, Size };
export interface NumericChangeEvent {
    /**
     * Specifies the initial event object received from the input element.
     */
    event?: React.ChangeEvent<HTMLInputElement>;
    /**
     * Specifies the current value of the NumericTextBox.
     */
    value?: number | null;
}
export interface NumericTextBoxProps extends inputBaseProps {
    /**
     * Specifies the value of the NumericTextBox. When provided, component becomes controlled.
     *
     * @default null
     */
    value?: number | null;
    /**
     * Specifies the default value of the NumericTextBox for uncontrolled mode.
     *
     * @default -
     */
    defaultValue?: number | null;
    /**
     * Specifies a minimum value that is allowed a user can enter.
     *
     * @default -
     */
    min?: number;
    /**
     * Specifies a maximum value that is allowed a user can enter.
     *
     * @default -
     */
    max?: number;
    /**
     * Specifies the incremental or decremental step size for the NumericTextBox.
     *
     * @default 1
     */
    step?: number;
    /**
     * Specifies the string shown as a hint/placeholder when the NumericTextBox is empty.
     *
     * @default -
     */
    placeholder?: string;
    /**
     * Specifies whether to show increment and decrement buttons (spin buttons) within the input field.
     * When enabled, up/down buttons appear that allow users to increment or decrement
     * the numeric value in the input by a predefined step
     *
     * @default true
     */
    spinButton?: boolean;
    /**
     * Specifies whether to show a clear button within the input field.
     * When enabled, a clear button (×) appears when the field has a value,
     * allowing users to quickly clear the input with a single click.
     *
     * @default false
     */
    clearButton?: React.ReactNode;
    /**
     * Specifies the number format that indicates the display format for the value of the NumericTextBox.
     *
     * @default -
     */
    format?: string;
    /**
     * Specifies the number precision applied to the textbox value when the NumericTextBox is focused.
     *
     * @default -
     */
    decimals?: number;
    /**
     * Specifies the currency code to use in currency formatting.
     * Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar,'EUR' for the euro.
     *
     * @default -
     */
    currency?: string;
    /**
     * Specifies a value that indicates whether the NumericTextBox control allows the value for the specified range.
     * If it is true, the input value will be restricted between the min and max range.
     * The typed value gets modified to fit the range on focused out state.
     * Else, it allows any value even out of range value,
     *
     * @default true
     */
    strictMode?: boolean;
    /**
     * Specifies whether the decimals length should be restricted during typing.
     *
     * @default false
     */
    validateOnType?: boolean;
    /**
     * Specifies the floating label type for the component.
     *
     * @default 'Never'
     */
    labelMode?: LabelMode;
    /**
     * Specifies the callback function that triggers when the value of the NumericTextBox changes.
     * The change event of the NumericTextBox component will be triggered in the following scenarios:
     * * Changing the previous value using keyboard interaction and then focusing out of the component.
     * * Focusing on the component and scrolling within the input.
     * * Changing the value using the spin buttons.
     * * Programmatically changing the value using the value property.
     *
     * @event onChange
     */
    onChange?: (event: NumericChangeEvent) => void;
}
export interface INumericTextBox extends NumericTextBoxProps {
    /**
     * Specifies the DOM element NumericTextBox component.
     *
     * @private
     * @default null
     */
    element?: HTMLInputElement | null;
}
type INumericTextBoxProps = NumericTextBoxProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof NumericTextBoxProps>;
/**
 * NumericTextBox component that provides a specialized input for numeric values with validation,
 * formatting, and increment/decrement capabilities. Supports both controlled and uncontrolled modes.
 *
 * ```typescript
 * import { NumericTextBox } from "@syncfusion/react-inputs";
 *
 * <NumericTextBox defaultValue={100} min={0} max={1000} />
 * ```
 */
export declare const NumericTextBox: React.ForwardRefExoticComponent<INumericTextBoxProps & React.RefAttributes<INumericTextBox>>;
export default NumericTextBox;