@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
92 lines (91 loc) • 3.62 kB
TypeScript
import type { RefObject } from 'react';
import type { InputMaskedProps } from '../../../../components/InputMasked';
import type { InputAlign, InputSize } from '../../../../components/Input';
import type { FieldBlockWidth } from '../../FieldBlock';
import type { FieldProps } from '../../types';
export type FieldNumberProps = FieldProps<number, undefined | number> & {
/** Ref to the underlying input element. */
ref?: RefObject<HTMLInputElement>;
/** Additional CSS class applied to the inner input element. */
inputClassName?: string;
/**
* Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default.
*/
currency?: InputMaskedProps['asCurrency'];
/** How to display the currency symbol: `code` (e.g., USD), `symbol` (e.g., $), `narrowSymbol`, or `name`. */
currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name' | false;
/**
* Format a number as a percentage.
*/
percent?: InputMaskedProps['asPercent'];
/**
* An array or a function returning an array of regexes to use as a mask for the input. If not given, the input will not be masked.
*/
mask?: InputMaskedProps['mask'];
/**
* Determines step granularity when increasing/decreasing the value via step control buttons or arrow keys. Defaults to `1`.
*/
step?: number;
/**
* When no `value` or `defaultValue` is given, start with a given value when increasing/decreasing the value via step control buttons or arrow keys. Defaults to `null`.
*/
startWith?: number;
/**
* Max number of decimals. Values with more decimals will be rounded. Defaults to `12`.
*/
decimalLimit?: number;
/**
* Whether or not to allow negative numbers. Defaults to `true`.
*/
allowNegative?: boolean;
/**
* Whether or not to allow leading zeroes during typing. Defaults to `false`.
*/
disallowLeadingZeroes?: boolean;
/**
* Text added before the value input.
*/
prefix?: string | ((value: number) => string);
/**
* Text added after the value input.
*/
suffix?: string | ((value: number) => string);
/**
* Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`.
*/
minimum?: number;
/**
* Validation for inclusive maximum number value (less than or equal). Defaults to `Number.MAX_SAFE_INTEGER`.
*/
maximum?: number;
/**
* Validation for exclusive minimum number value (greater than).
*/
exclusiveMinimum?: number;
/**
* Validation for exclusive maximum number value (less than).
*/
exclusiveMaximum?: number;
/**
* Validation that requires the number to be a multiple of a given value.
*/
multipleOf?: number;
/** The size of the input. Available sizes: `small`, `medium` (default), `large`. */
size?: InputSize;
/**
* `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.
*/
width?: FieldBlockWidth;
/**
* Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.
*/
align?: InputAlign;
/**
* Show buttons that increase/decrease the value by the step amount.
*/
showStepControls?: boolean;
/** Text showing in place of the value if no value is given. */
placeholder?: string;
};
declare function NumberComponent(props: FieldNumberProps): import("react/jsx-runtime").JSX.Element;
export default NumberComponent;