Combobox
Tier 2: Light-DOMActive-descendant autocomplete combobox in Light-DOM
$npx nnui add combobox
copy$npm install nnui-kit
copyInteractive Preview & Code
<!-- Pure Semantic Light-DOM Combobox -->
<ui-combobox>
<div data-part="input-wrapper">
<input data-part="input" placeholder="Search frameworks..." autocomplete="off">
<span data-part="toggle-icon">▼</span>
</div>
<ul data-part="listbox">
<li data-part="option" data-value="react">React 19</li>
<li data-part="option" data-value="vue">Vue 3</li>
<li data-part="option" data-value="svelte">Svelte 5</li>
<li data-part="option" data-value="astro">Astro</li>
</ul>
</ui-combobox>
import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements
export default function ComboboxDemo() {
const [tab, setTab] = useState('all');
const [val, setVal] = useState(50);
const [selected, setSelected] = useState('');
const [query, setQuery] = useState('');
return (
<!-- Pure Semantic Light-DOM Combobox -->
<ui-combobox onChange={(e: any) => setQuery(e.detail.value)}>
<div data-part="input-wrapper">
<input data-part="input" placeholder="Search frameworks..." autocomplete="off" />
<span data-part="toggle-icon">▼</span>
</div>
<ul data-part="listbox">
<li data-part="option" data-value="react">React 19</li>
<li data-part="option" data-value="vue">Vue 3</li>
<li data-part="option" data-value="svelte">Svelte 5</li>
<li data-part="option" data-value="astro">Astro</li>
</ul>
</ui-combobox>
);
}
<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements
const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');
const handleSelect = (val) => {
console.log('Selected:', val);
};
</script>
<template>
<!-- Pure Semantic Light-DOM Combobox -->
<ui-combobox @change="(e) => query = e.detail.value">
<div data-part="input-wrapper">
<input data-part="input" placeholder="Search frameworks..." autocomplete="off">
<span data-part="toggle-icon">▼</span>
</div>
<ul data-part="listbox">
<li data-part="option" data-value="react">React 19</li>
<li data-part="option" data-value="vue">Vue 3</li>
<li data-part="option" data-value="svelte">Svelte 5</li>
<li data-part="option" data-value="astro">Astro</li>
</ul>
</ui-combobox>
</template>
<script>
import 'nnui-kit';
let activeTab = $state('all');
let sliderValue = $state(50);
let selected = $state('');
</script>
<!-- Pure Semantic Light-DOM Combobox -->
<ui-combobox>
<div data-part="input-wrapper">
<input data-part="input" placeholder="Search frameworks..." autocomplete="off">
<span data-part="toggle-icon">▼</span>
</div>
<ul data-part="listbox">
<li data-part="option" data-value="react">React 19</li>
<li data-part="option" data-value="vue">Vue 3</li>
<li data-part="option" data-value="svelte">Svelte 5</li>
<li data-part="option" data-value="astro">Astro</li>
</ul>
</ui-combobox>
How to Utilize
NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:
React 18 & 19 (Next.js 15 App Router)
import 'nnui-kit/css';
import 'nnui-kit/client';
import { Combobox } from 'nnui-kit/react';
Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)
<!-- Automatically registers <ui-combobox> and <nnui-combobox> -->
import 'nnui-kit/css';
import 'nnui-kit/client';
Platform Features
Zero Shadow DOM
Element lives in the Light DOM. Tailwind and global CSS apply directly.
persist="url | local"
Add declarative persistence attribute to auto-sync state with URL search params.
sync="cross-tab"
Synchronize changes across all open browser tabs via BroadcastChannel.
