| Name | Description | Default | Type |
|---|---|---|---|
onChange* | | (value: string) => void | |
additionalInfo | Button when clicked will show additional information | | { content: string | Element; heading: string;} |
aria-label | Optional manual override for generated aria label | | string |
autoFocus | Automatically focuses the input on render. | | boolean |
className | Additional CSS classes. | | string |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
labelHidden | Visually hides the label region. | false | boolean |
max | The maximum value to accept for this input. This value must be greater than or equal to the value of the min attribute. | Number.MAX_SAFE_INTEGER | number |
min | The minimum value to accept for this input. This value must be less than or equal to the value of the max attribute. | Number.MIN_SAFE_INTEGER | number |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
numberOfDecimals | Determines the maximum number of decimal places. The value is rounded to the number of places. | variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1. | number |
onBlur | | (value: string) => void | |
onFocus | | (value: string) => void | |
onResolveSuggestion | | (accepted: boolean) => void | |
placeholder | Placeholder text. The browser defaults to an empty string. | | string |
readOnly | Makes the component non editable and non clickable. The browser defaults to false. | | boolean |
ref | Ref for the wrapping element. | | Ref<HTMLInputElement> |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
showDecimal | /** Determines whether decimal places should be shown. The value is rounded if true. | true | boolean |
showGroupSeparators | Determines whether group separators should be shown. | true | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
step | A stepping interval to use when using up and down arrows to adjust the value. | 1 | number |
unit | Defines unit of the number, like 'kg', 'miles' or '%'. | | string |
value | CurrencyInput input value. Requires an onChange handler to update value. | | string |
variant | Component variation. Might be rendered as regular input or stepper. | 'default' | 'default' |'stepper' |
NumberInput
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The NumberInput component allows the user to enter numerical data. Any other characters will be ignored. NumberInputs are auto-formatted according to locale, while the user types. You can configure the locale of your application via the Configuration component. If you require a user to select a number from a defined range, you should consider using the Slider component instead.
Usage
The NumberInput component can either show or hide decimals while inserting input via the showDecimal prop. If decimals are shown, you can limit the maximum number of decimals to show via the numberOfDecimals prop. You can also disable the default locale supported group separators by passing false to showGroupSeparators. You may also include a unit to display within the input Field.
The NumberInput component allows for manual entry of numerical values as well as native support of the up and down arrow keys to increase or decrease the current value. The arrow keys will modify the value by multitudes of the provided step, or 1 by default. The component also allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info. If an onResolveSuggestion callback function is provided, and the status is set to pending, the user will be prompted to accept or deny whatever suggested value populates the NumberInput.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.
Example
Enter a numerical value
Stepper variant
The NumberInput can also take a stepper variant that behaves identically to the NumberInput except that the input is centered with decremental and incremental actions on either end. These actions mimic the role of the up and down keys.
Example
Enter a numerical value