syncfusion/vue-ui-components-skills
Comprehensive guide for implementing Syncfusion Vue 3 dropdown components including AutoComplete, ComboBox, DropDownList, ListBox, Mention, MultiSelect, MultiColumn ComboBox, and DropdownTree using Vue Composition API.
npx skills add syncfusion/vue-ui-components-skills --skill syncfusion-vue-dropdowns
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
866.4K installsBrowser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installsReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…
617.3K installsBuild, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …
576.5K installsDebug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …
568.9K installsOther skills from syncfusion/vue-ui-components-skills · top by installs.
npx skills add syncfusion/vue-ui-components-skills
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
master
Parsed from SKILL.md frontmatter.
Files included with this skill beyond the listing page.
SKILL.md
31,195 B
SUMMARY.md
447 B
The AutoComplete component provides a matched suggestion list as the user types into an input field, allowing selection from the filtered results. It supports local and remote data, rich filtering options, templates, grouping, virtualization, and full accessibility.
📄 Read: [references/autocomplete-getting-started.md](references/autocomplete-getting-started.md)
@syncfusion/ej2-vue-dropdowns):popupHeight, :popupWidth)📄 Read: [references/autocomplete-data-binding.md](references/autocomplete-data-binding.md)
fields mapping (:fields="{ value: 'id', text: 'name' }")DataManager (ODataV4Adaptor, WebApiAdaptor)query property to filter/select remote datasortOrder for alphabetical ordering📄 Read: [references/autocomplete-filtering.md](references/autocomplete-filtering.md)
StartsWith, EndsWith, Contains:suggestionCount – limit number of suggestions:minLength – minimum characters before search triggers:ignoreCase – case-sensitive filtering:ignoreAccent – diacritics filtering:debounceDelay – delay filtering to reduce requests@filtering event📄 Read: [references/autocomplete-grouping.md](references/autocomplete-grouping.md)
:fields="{ groupBy: 'category' }"#groupTemplate📄 Read: [references/autocomplete-templates.md](references/autocomplete-templates.md)
#itemTemplate – customize each list item#groupTemplate – customize group header#headerTemplate – static popup header#footerTemplate – static popup footer#noRecordsTemplate – message when no data found#actionFailureTemplate – message on remote fetch failure📄 Read: [references/autocomplete-value-binding.md](references/autocomplete-value-binding.md)
:allowObjectBinding="true":value property📄 Read: [references/autocomplete-virtual-scroll.md](references/autocomplete-virtual-scroll.md)
:enableVirtualization for large datasetsVirtualScroll servicequery.take()📄 Read: [references/autocomplete-disabled-items.md](references/autocomplete-disabled-items.md)
:fields="{ disabled: 'isDisabled' }"disableItem() method for dynamic disabling:enabled="false"📄 Read: [references/autocomplete-accessibility-localization.md](references/autocomplete-accessibility-localization.md)
:enableRtl="true")setLocale()📄 Read: [references/autocomplete-styling.md](references/autocomplete-styling.md)
:cssClass property for custom class injection:allowResize="true")📄 Read: [references/autocomplete-how-to.md](references/autocomplete-how-to.md)
:autofill="true" – suggest first matched item on Arrow Down:highlight="true" – highlight typed characters in suggestion list:fields="{ iconCss: 'icon' }"ComboBox combines the features of AutoComplete with the ability to select from a dropdown list. It supports data binding, filtering, grouping, templates, cascading operations, and virtual scrolling.
📄 Read: [references/combobox-getting-started.md](references/combobox-getting-started.md)
📄 Read: [references/combobox-data-binding.md](references/combobox-data-binding.md)
:fields📄 Read: [references/combobox-filtering-and-search.md](references/combobox-filtering-and-search.md)
📄 Read: [references/combobox-grouping-and-sorting.md](references/combobox-grouping-and-sorting.md)
:fields="{ groupBy: 'category' }"📄 Read: [references/combobox-templates-and-customization.md](references/combobox-templates-and-customization.md)
#itemTemplate📄 Read: [references/combobox-styling-and-theming.md](references/combobox-styling-and-theming.md)
📄 Read: [references/combobox-popup-resizing.md](references/combobox-popup-resizing.md)
📄 Read: [references/combobox-advanced-features.md](references/combobox-advanced-features.md)
📄 Read: [references/combobox-api.md](references/combobox-api.md)
📄 Read: [references/combobox-how-to-guide.md](references/combobox-how-to-guide.md)
📄 Read: [references/combobox-troubleshooting.md](references/combobox-troubleshooting.md)
DropdownList displays a list of options in a dropdown menu, allowing users to select one value. It supports data binding, filtering, grouping, templates, cascading, and accessibility features.
📄 Read: [references/dropdownlist-getting-started.md](references/dropdownlist-getting-started.md)
📄 Read: [references/dropdownlist-data-binding.md](references/dropdownlist-data-binding.md)
📄 Read: [references/dropdownlist-features-and-configuration.md](references/dropdownlist-features-and-configuration.md)
📄 Read: [references/dropdownlist-filtering.md](references/dropdownlist-filtering.md)
📄 Read: [references/dropdownlist-grouping-and-templates.md](references/dropdownlist-grouping-and-templates.md)
📄 Read: [references/dropdownlist-accessibility-styling-localization.md](references/dropdownlist-accessibility-styling-localization.md)
📄 Read: [references/dropdownlist-how-to.md](references/dropdownlist-how-to.md)
📄 Read: [references/dropdownlist-api.md](references/dropdownlist-api.md)
ListBox displays a list of items and allows selection of one or multiple items. It supports data binding, dual-list operations, icons, templates, keyboard navigation, and accessibility.
📄 Read: [references/listbox-getting-started.md](references/listbox-getting-started.md)
📄 Read: [references/listbox-data-binding.md](references/listbox-data-binding.md)
📄 Read: [references/listbox-selection.md](references/listbox-selection.md)
📄 Read: [references/listbox-features.md](references/listbox-features.md)
📄 Read: [references/listbox-dual-list-box.md](references/listbox-dual-list-box.md)
📄 Read: [references/listbox-icons-and-templates.md](references/listbox-icons-and-templates.md)
📄 Read: [references/listbox-style-and-appearance.md](references/listbox-style-and-appearance.md)
📄 Read: [references/listbox-accessibility.md](references/listbox-accessibility.md)
📄 Read: [references/listbox-how-to-guides.md](references/listbox-how-to-guides.md)
📄 Read: [references/listbox-api.md](references/listbox-api.md)
Mention provides @mention functionality for text inputs, allowing users to mention items (people, teams, etc.) in content.
📄 Read: [references/mention-getting-started.md](references/mention-getting-started.md)
📄 Read: [references/mention-working-with-data.md](references/mention-working-with-data.md)
📄 Read: [references/mention-filtering-data.md](references/mention-filtering-data.md)
📄 Read: [references/mention-template.md](references/mention-template.md)
📄 Read: [references/mention-sorting.md](references/mention-sorting.md)
📄 Read: [references/mention-disabled-items.md](references/mention-disabled-items.md)
📄 Read: [references/mention-customization.md](references/mention-customization.md)
📄 Read: [references/mention-accessibility.md](references/mention-accessibility.md)
📄 Read: [references/mention-localization.md](references/mention-localization.md)
📄 Read: [references/mention-api.md](references/mention-api.md)
MultiColumnComboBox extends ComboBox to display multiple columns of data, useful for complex selections with additional context.
📄 Read: [references/multicolumn-combobox-getting-started.md](references/multicolumn-combobox-getting-started.md)
📄 Read: [references/multicolumn-combobox-columns.md](references/multicolumn-combobox-columns.md)
📄 Read: [references/multicolumn-combobox-data-binding.md](references/multicolumn-combobox-data-binding.md)
📄 Read: [references/multicolumn-combobox-filtering.md](references/multicolumn-combobox-filtering.md)
📄 Read: [references/multicolumn-combobox-grouping.md](references/multicolumn-combobox-grouping.md)
📄 Read: [references/multicolumn-combobox-sorting.md](references/multicolumn-combobox-sorting.md)
📄 Read: [references/multicolumn-combobox-items.md](references/multicolumn-combobox-items.md)
📄 Read: [references/multicolumn-combobox-templates.md](references/multicolumn-combobox-templates.md)
📄 Read: [references/multicolumn-combobox-virtualization.md](references/multicolumn-combobox-virtualization.md)
📄 Read: [references/multicolumn-combobox-events.md](references/multicolumn-combobox-events.md)
📄 Read: [references/multicolumn-combobox-accessibility.md](references/multicolumn-combobox-accessibility.md)
📄 Read: [references/multicolumn-combobox-localization.md](references/multicolumn-combobox-localization.md)
📄 Read: [references/multicolumn-combobox-api.md](references/multicolumn-combobox-api.md)
MultiSelect allows users to select multiple values from a dropdown list. It supports templates, grouping, search, filtering, tagging, and accessibility features.
📄 Read: [references/multiselect-getting-started.md](references/multiselect-getting-started.md)
📄 Read: [references/multiselect-data-binding.md](references/multiselect-data-binding.md)
📄 Read: [references/multiselect-selection-and-features.md](references/multiselect-selection-and-features.md)
📄 Read: [references/multiselect-filtering.md](references/multiselect-filtering.md)
📄 Read: [references/multiselect-grouping.md](references/multiselect-grouping.md)
📄 Read: [references/multiselect-templates.md](references/multiselect-templates.md)
📄 Read: [references/multiselect-accessibility-styling-localization.md](references/multiselect-accessibility-styling-localization.md)
📄 Read: [references/multiselect-api.md](references/multiselect-api.md)
The Dropdown Tree component displays hierarchical data in a collapsible tree structure within a dropdown interface. It combines tree navigation with dropdown accessibility, supporting multi-selection via checkboxes, lazy loading for large datasets, comprehensive customization through templates and events, filtering, and full accessibility with RTL and localization support.
Use DropdownTree immediately when you need to:
📄 Read: [references/dropdowntree-getting-started.md](references/dropdowntree-getting-started.md)
📄 Read: [references/dropdowntree-data-binding.md](references/dropdowntree-data-binding.md)
📄 Read: [references/dropdowntree-checkbox-selection.md](references/dropdowntree-checkbox-selection.md)
:showCheckBox property:selectAllText and :unSelectAllText📄 Read: [references/dropdowntree-templates.md](references/dropdowntree-templates.md)
📄 Read: [references/dropdowntree-multi-selection-filtering.md](references/dropdowntree-multi-selection-filtering.md)
:allowMultiSelection property and Ctrl/Shift keyboard interaction:delimiterChar and :mode configuration:allowFiltering and filter bar implementation:filterBarPlaceholder customization:ignoreCase and :ignoreAccent options📄 Read: [references/dropdowntree-tree-settings.md](references/dropdowntree-tree-settings.md)
:loadOnDemand for lazy loading implementation:autoCheck for hierarchical checkbox synchronization:expandOn behavior (Auto, Click, DblClick, None):checkDisabledChildren for disabled node handling📄 Read: [references/dropdowntree-field-mapping.md](references/dropdowntree-field-mapping.md)
📄 Read: [references/dropdowntree-advanced-features.md](references/dropdowntree-advanced-features.md)
📄 Read: [references/dropdowntree-accessibility-localization.md](references/dropdowntree-accessibility-localization.md)
<template>
<DropDownTreeComponent
id="dropdowntree"
:fields="fields"
placeholder="Select an item"
/>
</template>
<script setup>
import { DropDownTreeComponent } from '@syncfusion/ej2-vue-dropdowns';
import '@syncfusion/ej2-dropdowns/styles/material.css';
const data = [
{ id: '1', name: 'Electronics', expanded: true },
{ id: '2', name: 'Laptops', parentId: '1' },
{ id: '3', name: 'Phones', parentId: '1' },
{ id: '4', name: 'Appliances' },
];
const fields = {
dataSource: data,
value: 'id',
text: 'name',
parentValue: 'parentId',
hasChildren: 'hasChild'
};
</script><template>
<DropDownTreeComponent
id="dropdowntree"
:fields="fields"
:showCheckBox="true"
:autoCheck="true"
@change="onSelectionChange"
placeholder="Select multiple items"
/>
</template>
<script setup>
import { ref } from 'vue';
import { DropDownTreeComponent } from '@syncfusion/ej2-vue-dropdowns';
const selectedValues = ref([]);
const onSelectionChange = (event) => {
selectedValues.value = event.value || [];
console.log('Selected:', selectedValues.value);
};
// ... rest of component code
</script><template>
<ejs-autocomplete
:dataSource="countries"
:fields="{ text: 'Name', value: 'Code' }"
:value="selectedCountry"
placeholder="Select a country"
@change="onCountryChange"
></ejs-autocomplete>
</template>
<script setup>
import { ref } from 'vue';
import { AutoCompleteComponent } from '@syncfusion/ej2-vue-dropdowns';
const selectedCountry = ref('');
const countries = ref([
{ Name: 'Australia', Code: 'AU' },
{ Name: 'Austria', Code: 'AT' },
{ Name: 'Belgium', Code: 'BE' }
]);
const onCountryChange = (args) => {
selectedCountry.value = args.value;
};
</script><template>
<ejs-combobox
:dataSource="employees"
:fields="{ text: 'name', value: 'id' }"
:value="selectedEmployee"
placeholder="Select employee"
@change="onEmployeeChange"
></ejs-combobox>
</template>
<script setup>
import { ref } from 'vue';
import { ComboBoxComponent } from '@syncfusion/ej2-vue-dropdowns';
const selectedEmployee = ref('');
const employees = ref([
{ id: 1, name: 'John Smith' },
{ id: 2, name: 'Jane Doe' },
{ id: 3, name: 'Bob Johnson' }
]);
const onEmployeeChange = (args) => {
selectedEmployee.value = args.value;
};
</script><template>
<ejs-dropdownlist
:dataSource="statusOptions"
:value="selectedStatus"
placeholder="Select status"
@change="onStatusChange"
></ejs-dropdownlist>
</template>
<script setup>
import { ref } from 'vue';
import { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';
const selectedStatus = ref('');
const statusOptions = ref(['Active', 'Inactive', 'Pending']);
const onStatusChange = (args) => {
selectedStatus.value = args.value;
};
</script><template>
<ejs-multiselect
:dataSource="fruits"
:value="selectedFruits"
placeholder="Select fruits"
:showSelectAll="true"
@change="onFruitsChange"
></ejs-multiselect>
</template>
<script setup>
import { ref } from 'vue';
import { MultiSelectComponent } from '@syncfusion/ej2-vue-dropdowns';
const selectedFruits = ref([]);
const fruits = ref(['Apple', 'Banana', 'Cherry', 'Date']);
const onFruitsChange = (args) => {
selectedFruits.value = args.value;
};
</script><script setup>
const cities = ref([
{ id: 1, name: 'New York', state: 'NY' },
{ id: 2, name: 'Los Angeles', state: 'CA' }
]);
</script>
<template>
<ejs-combobox
:dataSource="cities"
:fields="{ text: 'name', value: 'id' }"
></ejs-combobox>
</template><script setup>
import { ref, computed } from 'vue';
const countries = ref([...]);
const statesByCountry = ref({...});
const selectedCountry = ref('');
const selectedState = ref('');
const availableStates = computed(() => {
return statesByCountry.value[selectedCountry.value] || [];
});
const onCountryChange = (args) => {
selectedCountry.value = args.value;
selectedState.value = '';
};
</script><script setup>
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
const remoteData = ref(
new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ODataV4Adaptor(),
crossDomain: true
})
);
const query = ref(new Query().select(['CustomerID', 'ContactName']).take(10));
</script><template>
<ejs-combobox :dataSource="employees">
<template #itemTemplate="{ data }">
<div class="flex items-center gap-2">
<img :src="data.avatar" class="w-6 h-6 rounded-full" />
<div>
<div>{{ data.name }}</div>
<div class="text-sm text-gray-600">{{ data.email }}</div>
</div>
</div>
</template>
</ejs-combobox>
</template>npm install @syncfusion/ej2-vue-dropdowns --saveIn src/main.ts:
// Choose one theme
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-inputs/styles/material3.css';
import '@syncfusion/ej2-dropdowns/styles/material3.css';
// Or use other themes: bootstrap5, tailwind3, fabric, fluentIn src/main.ts:
import { createApp } from 'vue';
import { AutoCompleteComponent, ComboBoxComponent, DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';
const app = createApp(App);
app.component('EjsAutocomplete', AutoCompleteComponent);
app.component('EjsCombobox', ComboBoxComponent);
app.component('EjsDropdownlist', DropDownListComponent);
app.mount('#app');✅ Production Ready - All components fully documented for Vue 3 Composition API
Last Updated: 2026 Framework: Vue 3 with Composition API Components: 8 (AutoComplete, ComboBox, DropdownList, ListBox, Mention, MultiColumnComboBox, MultiSelect, DropdownTree)