Input

Rules

Basic Example

const rule = {
    type:"input",
    title:"Product Name",
    field:"goods_name",
    value:"iphone 7",
    props: {
        placeholder: "Enter product name",
        allowClear: true,
    }
}

Props Configuration Examples

Text Input Box (text)

const rule = {
    type:"input",
    title:"Username",
    field:"username",
    props: {
        placeholder: "Enter username",
        allowClear: true,
        size: "medium",
    }
}

Textarea

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "Enter product description",
        autoSize: { minRows: 3, maxRows: 6 },
        showWordLimit: true,
        maxLength: 200,
    }
}

Password Input Box (password)

const rule = {
    type:"input",
    title:"Password",
    field:"password",
    props: {
        type: "password",
        placeholder: "Enter password",
        allowClear: true,
    }
}

Clearable Input Box

const rule = {
    type:"input",
    title:"Search Keyword",
    field:"keyword",
    props: {
        placeholder: "Enter search keyword",
        allowClear: true,
    }
}

Show Word Count

const rule = {
    type:"input",
    title:"Product Description",
    field:"description",
    props: {
        type: "textarea",
        placeholder: "Enter product description",
        maxLength: 200,
        showWordLimit: true,
    }
}

Disabled and Readonly

const rule = {
    type:"input",
    title:"Order Number",
    field:"order_no",
    value:"ORD20240101001",
    props: {
        disabled: true,
        // or use readonly: true,
    }
}

Events Examples

Handle Input and Focus Events

const rule = {
    type:"input",
    title:"Search Keyword",
    field:"keyword",
    props: {
        placeholder: "Enter search keyword",
        allowClear: true,
    },
    on: {
        change: (value) => {
            console.log('Input value changed:', value);
        },
        input: (value) => {
            console.log('Real-time input:', value);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
        clear: () => {
            console.log('Input cleared');
        },
    },
}

Real-Time Search (Using input Event)

const rule = {
    type:"input",
    title:"Search Products",
    field:"keyword",
    props: {
        placeholder: "Enter product name to search",
        allowClear: true,
    },
    inject: true,
    on: {
        input: ($inject, value) => {
            // Auto-search as user types
            if (value && value.length >= 2) {
                // Call search API
                searchProducts(value).then(res => {
                    // Update search results
                    $inject.api.setValue('searchResults', res.data);
                });
            }
        },
    },
}

Linkage Update Other Fields (change Event)

const rule = [
    {
        type:"input",
        title:"Product Name",
        field:"goods_name",
        props: {
            placeholder: "Enter product name",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Auto-generate product code
                if (value) {
                    const code = 'GD' + value.substring(0, 3).toUpperCase() + Date.now().toString().slice(-6);
                    $inject.api.setValue('goods_code', code);
                }
            },
        },
    },
    {
        type:"input",
        title:"Product Code",
        field:"goods_code",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_Input

value: String

Props

Parameter	Description	Type	Default	Version
size	Input box size	'mini' | 'small' | 'medium' | 'large'	'medium'
allow-clear	Whether to allow clearing the input box	boolean	false
disabled	Whether disabled	boolean	false
readonly	Whether in readonly state	boolean	false
error	Whether in error state	boolean	false
placeholder	Placeholder text	string	-
max-length	Maximum length of input value, errorOnly property added in version 2.12.0	number | { length: number; errorOnly?: boolean }	0
show-word-limit	Whether to show word count	boolean	false
word-length	Method for calculating character length	(value: string) => number	-
word-slice	Method for character truncation, used together with wordLength	(value: string, maxLength: number) => string	-	2.12.0

Events

Event Name	Description	Parameters
input	Triggered when user inputs	value: string
change	Triggered only when input box loses focus or Enter is pressed	value: string
press-enter	Triggered when user presses Enter	-
clear	Triggered when user clicks clear button	-
focus	Triggered when input box gains focus	-
blur	Triggered when input box loses focus	-

<input-password> Props

Parameter	Description	Type	Default
invisible-button	Whether to show visibility button	boolean	true

<input-search> Props

Parameter	Description	Type	Default	Version
search-button	Whether in post-button mode	boolean	false
loading	Whether in loading state	boolean	false
disabled	Whether disabled	boolean	false
size	Input box size	'mini' | 'small' | 'medium' | 'large'	'medium'
button-text	Text of search button, will replace original icon when used	string	-	2.16.0
button-props	Properties of search button	object	-

<input-search> Events

Event Name	Description	Parameters
search	Triggered when search button is clicked	value: string