Combobox

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

Framework: Next.jsunfold_more

<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

Class	Description
`cmb`	Outer container (position:relative)
`cmb-trigger`	Button that opens the dropdown
`cmb-dropdown`	Floating dropdown panel
`cmb-search`	Search input row at top of dropdown
`cmb-list`	Scrollable options list
`cmb-option`	Individual option
`cmb-option.selected`	Currently selected option

← Previous Collapsible Next → Context Menu