@tiller-ds/form-elements/NumberInput.d.ts

Form elements module of Tiller Design System

import * as React from "react";
import { NumberFormatProps } from "react-number-format";
declare type NumberFormatOnlyPropsUnion = "allowedDecimalSeparators" | "any" | "customInput" | "decimalSeparator" | "onValueChange" | "step" | "type" | "thousandSeparator" | "max" | "min";
export declare type NumberInputProps = {
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * Custom decimal separator (e.g. "," or ".").
     *
     * If not provided, it will be inferred from the IntlProvider.
     */
    decimalSeparator?: string;
    /**
     * Determines whether the component is disabled.
     */
    disabled?: boolean;
    /**
     * Value passed through from validation indicating to display the error on the component.
     */
    error?: React.ReactNode;
    /**
     * The help text displayed below the text input field.
     */
    help?: React.ReactNode;
    /**
     * Represents the label above the number input field.
     */
    label?: React.ReactNode;
    /**
     * The accessor value for the input field component (for validation, fetching, etc.).
     */
    name: string;
    /**
     * Function that handles the behaviour of the component once its state changes.
     */
    onChange?: (value: number | undefined) => void;
    /**
     * The placeholder displayed inside the number input field.
     */
    placeholder?: string;
    /**
     * Turns this field into a required field in the form. Only applies visual representation (* next to label),
     * still requires validation on frontend or backend to accompany this value if set to true.
     */
    required?: boolean;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
    /**
     * Custom thousand separator (e.g. "." or ",").
     *
     * If not provided, it will be inferred from the IntlProvider.
     */
    thousandSeparator?: string;
    /**
     * The value of the field sent on submit and/or retrieved on component render.
     */
    value?: string;
} & Omit<NumberFormatProps, NumberFormatOnlyPropsUnion>;
export default function NumberInput({ name, onChange, onBlur, decimalSeparator, thousandSeparator, ...props }: NumberInputProps): JSX.Element;
export {};