NorbieLink
search close
Pressto navigate to openEscto close
Home Components Combobox

An autocomplete input combining a text field with a dropdown list of options.

Framework: Next.jsunfold_more
Next.js
Remix
SvelteKit
Nuxt
Astro
<div class="cmb">
  <div class="cmb-trigger">Select framework...
    <span class="material-icons-round">unfold_more</span>
  </div>
  <div class="cmb-dropdown">
    <div class="cmb-search">
      <span class="material-icons-round">search</span>
      <input placeholder="Search...">
    </div>
    <div class="cmb-list">
      <div class="cmb-option selected">Next.js</div>
      <div class="cmb-option">Remix</div>
    </div>
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

API Reference

Classes

ClassDescription
cmbOuter container (position:relative)
cmb-triggerButton that opens the dropdown
cmb-dropdownFloating dropdown panel
cmb-searchSearch input row at top of dropdown
cmb-listScrollable options list
cmb-optionIndividual option
cmb-option.selectedCurrently selected option