InputNumber
Enter a number within certain range with the mouse or keyboard.
When to use
When a numeric value needs to be provided.
Examples
API
InputNumber are exported from @ceebee/ui/client.
InputNumber
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
addonAfter | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | ReactNode | - | 4.17.0 |
addonBefore | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | ReactNode | - | 4.17.0 |
changeOnBlur | Trigger onChange when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 |
changeOnWheel | Allows control with mouse wheel | boolean | - | 5.14.0 |
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 |
controls | Whether to show +- controls, or set custom arrow icons | boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | — |
decimalSeparator | Decimal separator | string | - | - |
placeholder | Placeholder | string | - | — |
defaultValue | The initial value | number | - | - |
disabled | If the input is disabled | boolean | false | - |
formatter | Specifies the format of the value presented | function(value: number | string, info: { userTyping: boolean, input: string }): string | - | — |
keyboard | If keyboard behavior is enabled | boolean | true | — |
max | The max value | number | Number.MAX_SAFE_INTEGER | - |
min | The min value | number | Number.MIN_SAFE_INTEGER | - |
parser | Specifies the value extracted from formatter | function(string): number | - | - |
precision | The precision of input value. Will use formatter when config of formatter | number | - | - |
readOnly | If the input is readonly | boolean | false | - |
status | Set validation status | 'error' | 'warning' | - | — |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 |
prefix | The prefix icon for the Input | ReactNode | - | — |
suffix | The suffix icon for the Input | ReactNode | - | 5.20.0 |
size | The height of input box | large | medium | small | - | - |
step | The number to which the current value is increased or decreased. It can be an integer or decimal | number | string | 1 | - |
stringMode | Set value as string to support high precision decimals. Will return string value by onChange | boolean | false | 4.13.0 |
mode | Show input or spinner | 'input' | 'spinner' | 'input' | — |
value | The current value of the component | number | - | - |
variant | Variants of Input | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 |
onChange | The callback triggered when the value is changed | function(value: number | string | null) | - | - |
onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
onStep | The callback function that is triggered when click up or down buttons / Keyboard / Wheel | (value: number, info: { offset: number, type: 'up' | 'down', emitter: 'handler' | 'keydown' | 'wheel' }) => void | - | — |
bordered | Whether has border style, please use variant instead | boolean | true | - |
blur() | Remove focus | - | — | — |
focus() | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | cursor - 5.22.0 | — |
nativeElement | The native DOM element | - | 5.17.3 | — |