InputNumber

Rules

Basic Example

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Price",
    value: 1,
    props: {
        precision: 2
    },
}

Props Configuration Examples

Set Value Range

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "Purchase Quantity",
    value: 1,
    props: {
        min: 1,
        max: 100,
        step: 1,
    },
}

Precision Control

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Product Price",
    value: 99.99,
    props: {
        precision: 2,
        step: 0.01,
        placeholder: "Enter price",
    },
}

Control Button Position

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "Quantity",
    value: 1,
    props: {
        controlsPosition: "right",
        min: 1,
    },
}

Disable Control Buttons

const rule = {
    type: "InputNumber",
    field: "score",
    title: "Score",
    value: 0,
    props: {
        controls: false,
        min: 0,
        max: 100,
        placeholder: "Enter score from 0-100",
    },
}

Strict Step

const rule = {
    type: "InputNumber",
    field: "discount",
    title: "Discount Rate",
    value: 0.1,
    props: {
        step: 0.1,
        stepStrictly: true,
        precision: 1,
        min: 0,
        max: 1,
    },
}

Events Examples

Listen to Value Changes and Focus Events

const rule = {
    type: "InputNumber",
    field: "price",
    title: "Product Price",
    value: 0,
    props: {
        min: 0,
        precision: 2,
        placeholder: "Enter price",
    },
    on: {
        change: (value) => {
            console.log('Value changed:', value);
        },
        blur: (event) => {
            console.log('Lost focus:', event);
        },
        focus: (event) => {
            console.log('Gained focus:', event);
        },
    },
}

Calculate Total Price After Value Change

const rule = [
    {
        type: "InputNumber",
        field: "price",
        title: "Unit Price",
        value: 0,
        props: {
            min: 0,
            precision: 2,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Automatically calculate total price
                const quantity = $inject.api.getValue('quantity') || 1;
                const total = value * quantity;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "quantity",
        title: "Quantity",
        value: 1,
        props: {
            min: 1,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Automatically calculate total price
                const price = $inject.api.getValue('price') || 0;
                const total = price * value;
                $inject.api.setValue('total', total.toFixed(2));
            },
        },
    },
    {
        type: "InputNumber",
        field: "total",
        title: "Total Price",
        props: {
            disabled: true,
            precision: 2,
        },
    },
]

Complete configuration items: Element_InputNumber

value :Number

Props

Property Name	Description	Type	Default Value
min	Set minimum value allowed by counter	number	-Infinity
max	Set maximum value allowed by counter	number	Infinity
step	Counter step	number	1
stepStrictly	Whether only multiples of step can be entered	boolean	false
precision	Value precision	number	—
size	Counter size	enum	default
readonly	Native readonly attribute, whether readonly	boolean	false
disabled	Whether disabled	boolean	false
controls	Whether to use control buttons	boolean	true
controlsPosition	Control button position	enum	—
name	Equivalent to native input name attribute	string	—
ariaLabel	Equivalent to native input aria-label attribute	string	—
placeholder	Equivalent to native input placeholder attribute	string	—
id	Equivalent to native input id attribute	string	—
valueOnClear	Value displayed when input is cleared	number / null / enum	—
validateEvent	Whether to trigger form validation	boolean	true
label	Equivalent to native input aria-label attribute	string	—

Events

Name	Description	Type
change	Triggered when bound value changes	Function
blur	Triggered when component Input loses focus	Function
focus	Triggered when component Input gains focus	Function

Slots

Slot Name	Description
decrease-icon	Custom input decrease button icon
increase-icon	Custom input increase button icon
prefix	Input header content
suffix	Input footer content