Render single or multi-select dropdowns with search, grouping, and virtual scrolling.
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-select
Please help me install this Agent Skill. Skill: n-select Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-select Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-select
Efficient and flexible dropdowns are essential for forms and data-heavy interfaces. The n-select component consolidates single and multi-select capabilities with search, remote data loading, and option grouping to streamline user input and improve performance on large lists.
Create a basic n-select with a few options and bind its value to a state variable, then enable filterable mode for large lists.
High-intent search queries and answers about installing and using this skill.
A Vue dropdown select with search and grouping can be implemented using a component that supports client-side filtering and organized category navigation. This component provides single and multi-select modes with configurable field-name mappings for backend data formatting.
Vue virtual scrolling significantly improves filterable dropdown performance with large datasets by rendering only visible options. This component utilizes virtual scrolling to maintain fast search speeds and smooth navigation when handling thousands of items in forms or dashboards.
A remote search dropdown select for large datasets is fully supported in this Vue component. It allows loading options dynamically from a backend using remote search, preventing client-side overload while maintaining filterable functionality.
Customizing a Vue multi-select dropdown with tags is best handled through a rich event and slot model. This component provides optional tag display for multi-select, custom rendering hooks, and placeholder configurations for seamless integration.
Mapping backend data fields to a Vue dropdown select requires configurable field-name mappings to match your API response structure. This component allows you to define custom field names, ensuring your grouped options and disabled states align with backend data without manual transformation.
Virtual scrolling in a Vue grouped select component should be enabled when dealing with large option sets that cause performance lag. It ensures efficient rendering by limiting DOM nodes, which is essential for admin panels or dashboards filtering extensive categorized data.
UmmItKinCreate and use Pinia stores in Vue apps with defineStore.
marcmontecalvoAutomate browser interactions for UI tasks and data extraction.
OZVECreate or modify dashboard forms with react-hook-form and zod validation.
syncfusionImplement Syncfusion TypeScript dropdown components with DataManager binding and accessibility.
