React | Stepper | 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 { Stepper } from '@optimus-web/core';
                                                        
                                                        <Stepper
                                                            size="medium"
                                                            label="Label"
                                                            helper="Helper, description, or notification text"
                                                        />

Name	Type	Default	Description
disabled?	boolean		An optional boolean that, if true, disables the stepper component
inline?	boolean		An optional boolean that, if true, makes the stepper component inline
label?	ReactNode		This optional property represents the label of the field. It can be any valid React node
required?	boolean		This optional boolean property indicates whether the field is required or not
size?	SizeType		An optional SizeType (not defined in the provided code) that could be used to control the size of the stepper component
helper?	ReactNode		This optional property represents a helper element for the field. It can be any valid React node
max?	number	Number.MAX_SAFE_INTEGER	The maximum value that the stepper can have
min?	number	Number.MIN_SAFE_INTEGER	The minimum value that the stepper can have
readOnly?	boolean		This optional boolean property indicates whether the field is read-only or not
step?	number	1	The step value for each increment or decrement of the stepper
suffix?	ReactNode		The suffix to be displayed after the stepper 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: number) => void		The callback function that is called when the value of the stepper changes
onFocus?	() => void		An optional function that handles the focus event
name	string		The name of the stepper
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		This optional boolean property indicates whether the field is inside a compound field or not
value	number		The current value of the stepper

Stepper

Resources

Example

API