🏠 Home / docs / samples / select
Select Component • Navigation Hub

Select Component Guides

Learn how to render accessible HTML <select> dropdowns directly from JSON options. Choose between the modern direct CDN ES module import guide or the enterprise window.ks runtime walkthrough.

Quick Concept • 3 min read ⚡

Using CDN Import

Fast, zero-build integration directly from jsDelivr using modern ES modules. Includes dynamic option management, interactive addition sandboxes, and instant change telemetry.

What you will learn:
  • 1. Zero-Build CDN Import: Direct import renderDirect from "..." via ES modules.
  • 2. Flexible Options Schema: Passing string arrays or value/label objects into data.
  • 3. Interactive Sandbox: Dynamically adding new dropdown items with live DOM mounting.
  • 4. Selection Telemetry: Instant change event listeners tracking user picks in real-time.
Read CDN Guide →
Deep Dive • 15 min read 🌐

window.ks Global Runtime

Enterprise handbook on using the pre-bundled window.ks.jsonRenderers.renderToDom API for multi-page applications, form builders, and server templates.

What you will learn:
  • 1. Global Runtime Setup: Attaching window.ks to the browser window globally.
  • 2. renderToDom API: Configuration options for type: "select" and container targeting.
  • 3. Multi-Page Workflows: Drop-in form integration for traditional server-rendered templates.
  • 4. Native Accessibility: Preserves built-in browser keyboard navigation and mobile pickers.
Read window.ks Guide →
Concept • Mental Model

The House-Building Story for Select Dropdowns

How json-renderers constructs an HTML select menu from JSON data

📐 1. Architect

json-renderers-build

Prepares the blueprint. It takes your options array and creates a JSON specification defining a <select> element with nested <option> tags.

👷 2. Worker

@keshavsoft/json-to-tag

Builds the physical elements. Iterates over the blueprint specification and instantiates real browser HTMLSelectElement and HTMLOptionElement nodes.

📋 3. Site Manager

json-renderers

Mounts the finished product. Validates your configuration, calls the architect, directs the construction worker, and mounts the select menu into your designated container.

💡
Golden Rule: Stop assembling manual <option> strings in loops. Pass your choices array to render({ type: "select", data: [...] }) — the engine constructs accessible, valid DOM nodes immediately.