Number input

To enter a single piece of numerical data into a form. They are mainly used to quantify, survey or gather information.

Code


                                                        
                                                        
                                                            <PyxisNumberInput
                                                            v-model="modelValue"
                                                            label="label"
                                                            placeholder="placeholder"
                                                            id="text-input-id"
                                                            data-testid="text-input"
                                                        
                                                        />

Example of a NumberInput component

Props

The NumberInput component supports the following props:

Name	Type	Default	Required
v-model	number \| undefined	undefined	true
id	string	undefined	true
dataTestid	string	undefined	true
label	string	''	false
labelTooltip	string	undefined	false
placeholder	string	''	false
disabled	boolean	false	false
message	string	undefined	false
requiredMessage	string	undefined	false
errorMessage	string	undefined	false
warningMessage	string	undefined	false
optionalText	string	undefined	false
iconClass	string	undefined	false
min	number	undefined	false
max	number	undefined	false
step	number	1	false
size	'default' \| ‘compact'	'default'	false
labelledBy	string	‘'	false
ariaLabel	string	undefined	false

Events

The interactions on the NumberInput component are handled by the following Events

@update:modelValue : This event is emitted when the component's state or data is updated.

@change : This event is triggered when the selection within the component is modified.

@input : This event is emitted when there is an input action.

@enter : This event is emitted when enter key is pressed.

@blur : This event is emitted when the focus is lost on the input.

@increase : This event is triggered when the value is increase in the Input component type Number.

@decrease : This event is triggered when the value is decrease in the Input component type Number.