Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Autocomplete & combobox
Collections

Autocomplete & combobox

Autocomplete & combobox patterns built with StyloftCSS and native HTML.

CSS only2 examplesKeyboard friendly HTML

Autocomplete

Browser-provided suggestions via datalist. Remote results and custom filtering need application logic.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-auto">Choose a component</label
  ><input
    class="sl-input"
    id="ref-auto"
    list="ref-auto-options"
    placeholder="Start typing…"
  /><datalist id="ref-auto-options">
    <option value="Accordion"></option>
    <option value="Button"></option>
    <option value="Card"></option>
    <option value="Tabs"></option>
  </datalist>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

ComboBox

A native editable field with suggestions, not a custom ARIA combobox implementation.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-combo">Choose or enter a module</label
  ><input
    class="sl-input"
    id="ref-combo"
    list="ref-combo-options"
    value="Core"
  /><datalist id="ref-combo-options">
    <option value="Core"></option>
    <option value="Motion"></option>
    <option value="Tables"></option>
    <option value="Tabs"></option>
  </datalist>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.