Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsInputNumber
Designer doc
A component for number input.
Example
Variant
Input Number has 2 variants:Numeric(default) and Stepper
View code
Prefix & Suffix
View code
Input Range
If input number exceed max and min value, will show invalid status. clampValueOnBlur default true will reset to the nearest min or max value if value exceed.
View code
clampValueOnBlur reset behavior can be turn off or you can also define customized onBlur function to override the behavior
View code
Usage with Field
InputNumber is base on top of TextField. Can use together with Field.
View code
Number Type
Use number type for number keyboard on mobile and limit input to 0-9, ., and e Number type will not be able to use formatter and parser together
View code
However, it’s more recommended to use our custom prop inputType="number" which supports more compatibility with our custom components. When this is used, inputMode is default set to decimal, but can be overriden.
View code
Formatter and Parser
Example use of prefix, formatter and parser for thousand separator and decimal place
View code
Remove or customize stepper
addonBefore and addonAfter can be used for customization
View code
References
- Ant Design: https://ant.design/components/input-number/
- Chakra UI: https://chakra-ui.com/numberinput
API
InputNumber
| Prop name | Type | Default | Description |
|---|---|---|---|
| addonAfter | ReactNode | ||
| addonBefore | ReactNode | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| autoComplete | "on" | "off" | "nope" | ||
| clampValueOnBlur | boolean | true | When input number field lost focus, will correct to the nearest limit max / min amount |
| defaultValue | number | @deprecated use initialValue | |
| disabled | boolean | ||
| formatter | (value: number) => string | Formatter specifies the format of the value presented | |
| fullWidth | boolean | width: 100% is too troublesome to handle with custom css because of the nesting | |
| initialValue | number | ||
| inputType | InputTypes | text | Control whether to restrict users to text or number inputs only. |
| invalid | boolean | If not set, will be invalid when field is invalid, display value is not a number, exceed min or max | |
| leftElement | ReactNode | @deprecated use addonBefore or prefix | |
| leftElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| max | number | 9007199254740991 | The maximum value of the input, when exceed, field will be invalid status |
| min | number | The minimum value of the input, when fall below, field will be invalid status | |
| onChange | (value: number) => void | onChange will only be call when the value is a valid number or null | |
| onTextChange | (val: string) => void | ||
| parser | (displayValue: string) => number | Parser specifies the value extracted from formatter | |
| placeholder | ReactNode | ||
| prefix | ReactNode | ||
| readOnly | boolean | ||
| rightElement | ReactNode | @deprecated use addonAfter or suffix | |
| rightElementContainerProps | HTMLAttributes<HTMLDivElement> & { ref?: MutableRefObject<HTMLDivElement>; } | ||
| step | number | 1 | |
| suffix | ReactNode | ||
| type | "number" | "text" | text | Number type can trigger mobile browser keyboards to show the number keyboard, as well as limit inputs to numbers only 0-9, . and e, but will not be able to use formatter and parser. |
| value | number | ||
| variant | InputNumberVariants | numeric | |
| wrapperProps | WrapperProps |
InputNumberDecrementStepper
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants | flat |
InputNumberIncrementStepper
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants | flat |
InputNumberStepper
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |