InputNumber

Rules

Basic Example

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

Props Configuration Examples

Set Minimum and Maximum Values

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

Set Precision and Step

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

Button Mode

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

Disabled State

const rule = {
    type: "InputNumber",
    field: "total",
    title: "Total Price",
    value: 0,
    props: {
        disabled: true,
    }
}

Events Examples

Listen to Value Changes

const rule = {
    type: "InputNumber",
    field: "quantity",
    title: "Purchase Quantity",
    value: 1,
    props: {
        min: 1,
        max: 100,
    },
    on: {
        change: (value) => {
            console.log('Value changed:', value);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
    },
}

Linkage Calculate Total Price

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

Complete configuration items: arco-design_InputNumber

value: Number

Props

Parameter	Description	Type	Default
mode	Mode (embed: embedded button mode, button: left-right button mode)	'embed' | 'button'	'embed'
precision	Number precision	number	-
step	Step size for number changes	number	1
disabled	Whether disabled	boolean	false
error	Whether in error state	boolean	false
max	Maximum value	number	Infinity
min	Minimum value	number	-Infinity
formatter	Define display value for input box	func	-
parser	Convert from formatter to number, used together with formatter	func	-
placeholder	Input box placeholder text	string	-
hide-button	Whether to hide buttons (only available in embed mode)	boolean	false
size	Input box size	'mini' | 'small' | 'medium' | 'large'	'medium'

Events

Event Name	Description	Parameters
change	Triggered when value changes	value: union
focus	Triggered when input box gains focus	-
blur	Triggered when input box loses focus	-