Components
AbbreviateNumberActionLinkAdaptiveCardAffixAuthorityCheckCalendarViewChartConfirmDialogContainerCustomFormatInputDataTableDebounceInputDoubleSidedImageEllipsisButtonGanttChartGrowShrinkValueIconTextImageGalleryLoadingMasonryMediaSkeletonNavToggleNumericInputOtpInputPasswordInputPatternInputRegionMapRichTextEditorSegmentItemOptionStickyFooterSyntaxHighlighterUsersAvatarGroup
FormNumericInput
FormCustomFormatInput wrapped Input component with react-number-format, refer to the official doc for more usage example .
Basic
Basic usage of FormNumericInput, all react-number-format props can be apply to this component as well.
WithForm
Example usage with React Hook Form
API
FormNumericInput
| Prop | Description | Type | Default |
|---|---|---|---|
| inputPrefix | Render a prefix content inside Input | string | ReactNode | - |
| inputSuffix | Render a suffix content inside Input | string | ReactNode | - |
| thousandSeparator | Whether to enable thousandSeparator, also allow custom character | boolean | string | - |
| decimalSeparator | Decimal separator symbol | string | - |
| allowedDecimalSeparators | Characters which when pressed result in a decimal separator. When missing, decimal separator and '.' are used | Array | - |
| thousandsGroupStyle | Defines the thousand grouping style | 'thousand' | 'lakh' | 'wan' | 'none' | - |
| decimalScale | If defined, it limits the number of digits after the decimal point | number | - |
| fixedDecimalScale | If set to true, it adds trailing 0s after decimalSeparator to match given decimalScale | boolean | - |
| allowLeadingZeros | This allows enabling or disabling leading zeros in the input field. By default, on blur-sm of an input, leading zeros are removed. To allow leading 0s in the input field, set allowLeadingZeros to true. This does not, however, control trailing zeros | boolean | - |
| allowNegative | If set to false, negative numbers will not be allowed | boolean | - |
| suffix | Adds the suffix after the input value | string | - |
| prefix | Adds the prefix character before the input value | string | - |
Dependencies
React number format
All common React number format props can be applied on this component, refer official docs for the complete this.props.first list.