Forge Select: a zero-dependency, framework-agnostic open-source replacement for Select2

Select2 has served the web development community for over a decade, but it's built on jQuery — a dependency that's increasingly hard to justify when most of the modern stack (React, Vue, Next.js, Svelte) doesn't need jQuery anywhere else in the application. Pulling in jQuery just to get an advanced select box is a trade-off that no longer makes sense. Forge Select is our answer: a framework-agnostic select/combobox component with zero runtime dependencies, written in plain TypeScript, usable directly in vanilla JS or through official React/Vue wrappers.

The entire core is 5 files — minimal by design

Unlike many UI libraries that grow bloated over time, Forge Select's core fits into exactly 5 TypeScript files: `ForgeSelect.ts` (the entire component logic — DOM construction, event binding, selection state, search/filtering, keyboard navigation, virtual scroll, AJAX — in a single class, no sub-component split), `types.ts` (public type definitions), `emitter.ts` (a minimal typed pub/sub system), `i18n.ts` (multi-language string tables), and `index.ts` (the sole public entrypoint). Zero runtime dependency is a hard constraint of the project — `package.json` has no `dependencies` field at all, only `devDependencies` for build/test tooling. Adding a new dev dependency is fine; adding a runtime dependency never is.

A feature set built for real products, not just a demo

• **Rich item rendering** — each option can display an avatar, a label, and a description, with built-in fields rendered via `textContent`/`createElement` for XSS safety by design
• **Automatic virtual scrolling** — kicks in once a list exceeds 100 rows, with a FIFO render cache so each template runs only once per option, keeping performance steady with lists of thousands of items
• **Tree select** — just add `children` to an option to get expandable/collapsible nodes with cascading parent-child selection, and an indeterminate state for parent nodes that are only partially selected
• **Tags mode and drag-to-reorder** — `allowCreate` lets users create new options from free text; in multiple mode, users can drag-and-drop reorder tags via mouse/touch/pen or Alt+arrow keys, syncing the order back into the native `<select multiple>` so plain form submission serializes in the dragged order
• **AJAX and pagination** — remote data loading with built-in debounce and infinite-scroll pagination support, using an incrementing `ajaxRequestId` to discard stale responses that arrive out of order

Accessibility and multi-language support aren't bolted on

Forge Select sets `role="listbox"`, `aria-multiselectable` in multiple mode, and `aria-activedescendant` driven by the keyboard-navigation index — proper ARIA combobox/listbox semantics, not a layer added after the visual component was already built. Multi-language support is designed in from the start too: built-in string tables ship in English and Vietnamese, with a `format()` function that interpolates `{placeholder}`-style variables, and a fully custom string table can be passed in for any other language.

Plugin architecture and a framework wrapper strategy

Extending behavior doesn't require forking the core: a plugin is an object with optional `onInit`, `onOpen`, `onClose`, `onDestroy` hooks, run in registration order. For React and Vue — the two most common frameworks — we publish dedicated official wrappers (`forge-select-react` with controlled `value`/`onChange`, `forge-select-vue` with `v-model`) instead of leaving users to wrap it themselves. Angular and Svelte don't have official wrappers yet — the docs show a manual mount pattern via lifecycle hooks, and this remains on the roadmap; we don't pretend it's done when it isn't.

Why a software services company maintains a UI component library

This is the third time this year we've open-sourced an internal tool — the same spirit as Autumn Note (a rich-text editor) and KonexForge Themes (a VS Code theme family). An advanced select box is a component that shows up repeatedly in nearly every Pilot Build with a non-trivial form — product catalog management, customer selection in ERP Ecosystem One's CRM, or internal dashboard filters. Build it once, reuse it many times, and open-source it so real usage across multiple projects verifies its quality — instead of writing it once for a single client and never touching it again.

Conclusion

Forge Select solves the same problem Select2 once solved, but with an architecture that fits the modern web: zero dependencies, framework-agnostic, strict TypeScript, and enough advanced features (virtual scroll, tree select, tags, drag-and-drop) without trading away accessibility or bundle size. Try it directly via the demo and playground, install it via `npm install forge-select`, or browse the full source on GitHub — it's also the kind of component we reuse within the Development layer of every Pilot Build that needs a reliable UI component without building one from scratch. Forge Select and our other open-source projects are listed in full — versions, license, how to contribute — on the Community page.