Subcomponents

This component has 3 subcomponents:

Control

The control subcomponent is required to render the Control of the NumberInput component. Because of this, this component extends the native inputcomponent props. Because of this, you can use all of the native props. This is a required children.

Control API

Notice that there is a difference between using hasError, isDisabled, isReadOnly here or in the parent component. It is not recommended to change this props in the Control subcomponent, because this props can be inherited from the Wrapper. If you use it in the Control subcomponent, you will get the state only in the field.

Props	Type	Required
value	string | number | readonly string[] | undefined;	❌
defaultValue	string | number | readonly string[] | undefined;	❌
hasError	boolean	❌
isDisabled	boolean	❌
isReadOnly	boolean	❌
min	number	❌
max	number	❌
maxLength	number	❌
showButtons	boolean	❌
isWholeNumbersOnly	boolean	❌
customFilter	(value: string) => string;	❌
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void;	❌

value

This controls the NumberInputvalue when using a controlled approach.

defaultValue

This sets a default value for the input when the DOM is rendered. Used when having an uncontrolled approach.

min

Property that defines the minimum suggested value that the input should receive

max

Property that defines the maximum suggested value that the input should receive

maxLength

Property that defines the maximum length of characters the input field can receive. Notice the difference between the max and maxLength is esentially that max is just a visual representation of the maximum.

showButtons

Property in charge of showing or hiding the complementary input buttons

isWholeNumbersOnly

Filter that returns only whole numbers, removing other characters or symbols

customFilter

Function where developers can create their own filters

HelpText

The HelpText subcomponent extends the SDS HelpText component. See for reference: HelpText

Label

The Label subcomponent extends the SDS label component. See for reference: Label