#Combobox

#Usage

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/combobox.css";
@import "@a3s-lab/ui/styles/a3s.css";

<script src="/assets/js/all.min.js" defer></script>

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/combobox.min.js" defer></script>

<div id="framework-combobox" class="combobox w-[240px]">
  <input type="text" role="combobox" placeholder="Select a framework" aria-label="Framework" autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" aria-expanded="false" aria-controls="framework-combobox-listbox" /><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="combobox-trigger-icon"><path d="m6 9 6 6 6-6" /></svg>
  <div id="framework-combobox-popover" data-popover aria-hidden="true">
    <div role="listbox" id="framework-combobox-listbox" aria-orientation="vertical" data-empty="No items found.">
      <div role="option" data-value="Next.js">Next.js</div>
      <div role="option" data-value="SvelteKit">SvelteKit</div>
      <div role="option" data-value="Nuxt.js">Nuxt.js</div>
      <div role="option" data-value="Remix">Remix</div>
      <div role="option" data-value="Astro">Astro</div>
    </div>
  </div>
  <input type="hidden" name="framework" value="" />
</div>

#HTML structure

<div class="combobox">

Root element. Add data-auto-highlight="true" to make the first visible option active when the list opens or filters. Add data-format="object" to serialize selected values as objects. Add data-filter="manual" when your app owns filtering.

<input type="text" role="combobox">

The editable control. It can be a direct child, inside .input-group, or inside data-popover for popup mode.

<button aria-haspopup="listbox"> Optional

Opens the list from an input group or popup trigger. In popup mode, include a child with data-value and optional data-placeholder to display the selected value.

<button data-clear> Optional

Clears the current selection. Put the clear icon inside the button.

<svg class="combobox-trigger-icon"> Optional

Decorative trailing icon for input-style comboboxes. Replace the SVG to customize the icon.

<div data-popover>

The suggestions popup. Use data-side and data-align like Popover; the shared runtime flips and clamps the list to the visual viewport.

<div role="listbox">

The suggestions list. Add aria-multiselectable="true" in multiple mode. The component uses that attribute to render selected chips around the input.

<div role="option" data-value="...">

Selectable option. Options can contain custom HTML; use data-label when the input should display different text than the rendered content.

<input type="hidden">

Submitted value. Single mode stores a string; multiple mode stores a JSON array. With data-format="object", selected values are stored as objects.

#JavaScript API

#Examples

#Multiple

#Clear button

#Groups

#Custom items

#Invalid

#Disabled

#Auto highlight

Auto highlight makes the first visible option active when the list opens or filters, so pressing Enter can select it without arrowing first.

#Popup

#Input group

#RTL