React | Number Input | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { NumberInput, NumberInputValue } from '@optimus-web/core';
                                                        import { useState } from 'react';
                                                        
                                                        const MyForm = () => {
                                                          const [value, setValue] = useState<NumberInputValue>();
                                                          const [error, setError] = useState('');
                                                        
                                                          const handleChange = (_event: NumberInputEvent, newValue?: number) => {
                                                            setValue(newValue);
                                                            
                                                            if (newValue !== undefined) {
                                                              if (newValue < 0) {
                                                                setError('Value cannot be negative');
                                                              } else if (newValue > 1000) {
                                                                setError('Value exceeds maximum limit');
                                                              } else {
                                                                setError('');
                                                              }
                                                            }
                                                          };
                                                        
                                                          return (
                                                            <NumberInput
                                                              label="Price"
                                                              value={value}
                                                              onChange={handleChange}
                                                              min={0}
                                                              max={1000}
                                                              precision={2}
                                                              step={0.01}
                                                              prefix="$"
                                                              suffix="USD"
                                                              helper="Enter a price between $0 and $1000"
                                                              error={error}
                                                              decimalSeparator=","
                                                              groupSeparator="."
                                                            />
                                                          );
                                                        }

Name	Type	Default	Description
disabled?	boolean	false	An optional boolean that, if true, disables interaction
inline?	boolean	false	An optional boolean that, if true, makes the input component inline
label?	ReactNode		This optional property represents the label of the field. It can be any valid React node
error?	ReactNode		Error message to display below the input
required?	boolean	false	This optional boolean property indicates whether the field is required or not
size?	small \| medium \| large \| extraLarge	medium	Input size variant
helper?	ReactNode		This optional property represents a Helper text below input. It can be any valid React node
max?	number	Number.MAX_SAFE_INTEGER	The maximum value that the input can have
min?	number	Number.MIN_SAFE_INTEGER	The minimum value that the input can have
precision?	numer	0	Decimal places to display
readOnly?	boolean	false	Make input read-only
step?	number	1	Step size for increment/decrement
prefix?	ReactNode		Text before input value
suffix?	ReactNode		Text after input value
className?	string		This optional property is a string that specifies the class name
forText?	string		This optional property is a string that can be used for additional text related to the field
forwardedRef?	Ref<HTMLElement>		This optional property is a ref that can be forwarded to the field. It is a Ref for an HTMLElement
htmlFor?	string		This optional property is a string that specifies which form element a label is bound to
onBlur?	() => void		An optional function that handles the blur event
onChange	(e: ChangeEvent<HTMLInputElement> \| MouseEvent \| KeyboardEvent, newValue: InputValue) => void		The callback function that is called when the value of the input changes
onFocus?	() => void		An optional function that handles the focus event
name	string		The name of the input
captionIconWithTooltip?	ReactNode		This optional property represents a caption icon with a tooltip. It can be any valid React node
captionIconHandler?	MouseEventHandler<HTMLButtonElement>		This optional property is a function that handles mouse events on a caption icon in the field. It receives a MouseEventHandler for an HTMLButtonElement
insideCompoundField?	boolean	false	This optional boolean property indicates whether the field is inside a compound field or not
value?	InputValue		The current value of the input
keyboardEntryDisabled?	boolean	false	Disable keyboard input
decimalSeparator?	string	.	Decimal separator character
groupSeparator?	string	,	Thousands separator character

Number Input

Resources

Example

API