Select

Rules

Basic Example

const rule = {
    type: "select",
    field: "cate_id",
    title: "Product Category",
    value: ["104","105"],
    options: [
        {"value": "104", "label": "Organic Vegetables", "disabled": false},
        {"value": "105", "label": "Fresh Fruits", "disabled": false},
     ],
    props: {
        multiple: true
    },
}

Props Configuration Examples

Single Select Dropdown

const rule = {
    type: "select",
    field: "category",
    title: "Product Category",
    value: "104",
    options: [
        {"value": "104", "label": "Organic Vegetables"},
        {"value": "105", "label": "Fresh Fruits"},
        {"value": "106", "label": "Seafood"},
    ],
    props: {
        placeholder: "Select product category",
        allowClear: true,
    },
}

Multiple Select Dropdown

const rule = {
    type: "select",
    field: "tags",
    title: "Product Tags",
    value: ["104","105"],
    options: [
        {"value": "104", "label": "Hot Sale"},
        {"value": "105", "label": "New Product"},
        {"value": "106", "label": "Recommended"},
    ],
    props: {
        multiple: true,
        maxTagCount: 2,
        placeholder: "Select tags",
    },
}

Searchable Dropdown

const rule = {
    type: "select",
    field: "product",
    title: "Product Name",
    options: [
        {"value": "1", "label": "iPhone 15 Pro"},
        {"value": "2", "label": "MacBook Pro"},
        {"value": "3", "label": "iPad Air"},
    ],
    props: {
        allowSearch: true,
        placeholder: "Enter or select product",
        allowClear: true,
    },
}

Remote Search

const rule = {
    type: "select",
    field: "user",
    title: "Select User",
    options: [],
    props: {
        allowSearch: true,
        placeholder: "Enter username to search",
        allowClear: true,
        loading: false,
    },
    inject: true,
    on: {
        search: ($inject, value) => {
            if (value) {
                // Call remote search API
                searchUsers(value).then(res => {
                    // Update options
                    $inject.api.updateRule('user', {
                        options: res.data.map(item => ({
                            value: item.id,
                            label: item.name
                        }))
                    });
                });
            }
        },
    },
}

Events Examples

Handle Selection Changes

const rule = {
    type: "select",
    field: "category",
    title: "Product Category",
    options: [
        {"value": "104", "label": "Organic Vegetables"},
        {"value": "105", "label": "Fresh Fruits"},
    ],
    props: {
        placeholder: "Select category",
        allowClear: true,
    },
    on: {
        change: (value, option) => {
            console.log('Selection value changed:', value, option);
        },
        clear: () => {
            console.log('Selection cleared');
        },
        search: (value) => {
            console.log('Search value:', value);
        },
    },
}

Linkage Update Other Fields After Selection

const rule = [
    {
        type: "select",
        field: "category",
        title: "Product Category",
        options: [
            {"value": "1", "label": "Electronics"},
            {"value": "2", "label": "Clothing & Accessories"},
        ],
        props: {
            placeholder: "Select category",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Load subcategories based on selection
                if (value === "1") {
                    $inject.api.updateRule('subcategory', {
                        options: [
                            {"value": "11", "label": "Mobile Phones"},
                            {"value": "12", "label": "Computers"},
                        ]
                    });
                } else if (value === "2") {
                    $inject.api.updateRule('subcategory', {
                        options: [
                            {"value": "21", "label": "Men's Clothing"},
                            {"value": "22", "label": "Women's Clothing"},
                        ]
                    });
                }
            },
        },
    },
    {
        type: "select",
        field: "subcategory",
        title: "Subcategory",
        options: [],
        props: {
            placeholder: "Select category first",
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_Select

value: Number | String | Array

Options

Parameter	Description	Type	Default
value	Option value	OptionValue	-
label	Option content	string	-
disabled	Whether disabled	boolean	false
tagProps	Properties of multi-select tag for option	any	-
render	Custom rendering	RenderFunction	-

Props

Parameter	Description	Type	Default	Version
multiple	Whether to enable multiple selection mode (search is enabled by default in multiple mode)	boolean	false
size	Size of select box	'mini' | 'small' | 'medium' | 'large'	'medium'
placeholder	Placeholder	string	-
loading	Whether in loading state	boolean	false
disabled	Whether disabled	boolean	false
error	Whether in error state	boolean	false
allow-clear	Whether to allow clear	boolean	false
allow-search	Whether to allow search	boolean | { retainInputValue?: boolean }	`false (single)	true (multiple)`
allow-create	Whether to allow create	boolean	false
max-tag-count	Maximum number of tags displayed in multiple selection mode. 0 means unlimited	number	0
popup-container	Mount container for popup	string | HTMLElement	-
bordered	Whether to show input box border	boolean	true
popup-visible	Whether to show dropdown menu	boolean	-
default-popup-visible	Whether popup is visible by default (uncontrolled mode)	boolean	false
unmount-on-close	Whether to destroy elements when dropdown menu closes	boolean	false
filter-option	Whether to filter options	boolean | ((inputValue: string, optionInfo: OptionInfo) => boolean)	true
options	Option data	Option[]	[]
virtual-list-props	Pass virtual list properties, pass this parameter to enable virtual scrolling VirtualListProps	VirtualListProps	-
trigger-props	Trigger properties of dropdown menu	TriggerProps	-
format-label	Format display content	(data: OptionInfo) => string	-
fallback-option	Custom option for values that don't exist	boolean| ((value: string | number | Record<string, unknown>) => OptionData) | false	2.10.0
show-extra-options	Whether to show extra options in dropdown menu	boolean	true	2.10.0
value-key	Property name used to determine option key value	string	'value'	2.18.0

Events

Event Name	Description	Parameters
change	Triggered when value changes	-
input-value-change	Triggered when input box value changes	-
popup-visible-change	Triggered when dropdown display state changes	-
clear	Triggered when clear button is clicked	-
remove	Triggered when tag delete button is clicked	-
search	Triggered when user searches	-
dropdown-scroll	Triggered when dropdown menu scrolls	-
dropdown-reach-bottom	Triggered when dropdown menu scrolls to bottom	-