Stepper

Stepper is an input allowing users to enter a numeric value and incrementally adjust it.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

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"
                                                        />
                                                        
                                                            

API

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