Select

Tier 2: Light-DOM

Form-associated custom select with ElementInternals

Installation

$npx nnui add select

copy

Interactive Preview & Code

Zinc Neutral
Slate Professional
Emerald Forest
Rose Modern

<!-- Form-Associated Select via ElementInternals -->
<ui-select name="theme" required>
  <button type="button" data-part="trigger">
    <span data-part="value">Select a theme...</span>
    <span>▾</span>
  </button>
  <ul data-part="listbox">
    <li data-part="option" data-value="zinc">Zinc Neutral</li>
    <li data-part="option" data-value="slate">Slate Professional</li>
    <li data-part="option" data-value="emerald">Emerald Forest</li>
  </ul>
</ui-select>

import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements

export default function SelectDemo() {
  const [tab, setTab] = useState('all');
  const [val, setVal] = useState(50);
  const [selected, setSelected] = useState('');
  const [query, setQuery] = useState('');

  return (
    <!-- Form-Associated Select via ElementInternals -->
    <ui-select name="theme" required onChange={(e: any) => setSelected(e.detail.value)}>
      <button type="button" data-part="trigger">
        <span data-part="value">Select a theme...</span>
        <span>▾</span>
      </button>
      <ul data-part="listbox">
        <li data-part="option" data-value="zinc">Zinc Neutral</li>
        <li data-part="option" data-value="slate">Slate Professional</li>
        <li data-part="option" data-value="emerald">Emerald Forest</li>
      </ul>
    </ui-select>
  );
}

<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>
  <!-- Form-Associated Select via ElementInternals -->
  <ui-select name="theme" required @change="(e) => selected = e.detail.value">
    <button type="button" data-part="trigger">
      <span data-part="value">Select a theme...</span>
      <span>▾</span>
    </button>
    <ul data-part="listbox">
      <li data-part="option" data-value="zinc">Zinc Neutral</li>
      <li data-part="option" data-value="slate">Slate Professional</li>
      <li data-part="option" data-value="emerald">Emerald Forest</li>
    </ul>
  </ui-select>
</template>

<script>
  import 'nnui-kit';

  let activeTab = $state('all');
  let sliderValue = $state(50);
  let selected = $state('');
</script>

<!-- Form-Associated Select via ElementInternals -->
<ui-select name="theme" required onchange={(e) => selected = e.detail.value}>
  <button type="button" data-part="trigger">
    <span data-part="value">Select a theme...</span>
    <span>▾</span>
  </button>
  <ul data-part="listbox">
    <li data-part="option" data-value="zinc">Zinc Neutral</li>
    <li data-part="option" data-value="slate">Slate Professional</li>
    <li data-part="option" data-value="emerald">Emerald Forest</li>
  </ul>
</ui-select>

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 { Select } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-select> and <nnui-select> -->
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.