lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

Combobox

Autocomplete select with filtering, custom values, and grouping.

The <luna-combobox> component provides an autocomplete select with filtering, custom values, multiple selection, and grouped options.

Paths

/lunadom/components/combobox/combobox.js REQUIRED
/lunadom/components/option/option.js REQUIRED
/lunadom/components/option-group/option-group.js REQUIRED

Basic Autocomplete

React Vue.js Angular Svelte SolidJS Preact

Allow Custom Values

JavaScript TypeScript Python Rust Go

Multiple Selection

HTML CSS JavaScript Node.js React Vue Docker Kubernetes

Grouped Options

React Vue Angular Node.js Django Ruby on Rails PostgreSQL MongoDB Redis

Customization

Slots
default - <luna-option> or <luna-option-group> elements
prefix - Content to display before the input text (e.g., an icon)
suffix - Content to display after the input text and before the chevron
Attributes
label - Label text for the combobox
placeholder - Placeholder text
autocomplete - Enable autocomplete filtering
allow-custom-value - Allow entering custom values
multiple - Allow multiple selections
clearable - Show clear button
help-text - Help text below the combobox
max-options-visible - Max options to show in dropdown
disabled - Whether the combobox is disabled
pill - Whether the combobox has a pill shape
size="md" - Size of the combobox (sm, md, lg)
placement="bottom" - Where to position the dropdown (top, bottom)
value - The current value or comma-separated values (for multiple) of the combobox
filter-mode="contains" - How to filter options: 'contains' (default), 'startsWith', 'custom'
CSS Variables
--luna-combobox-bg - Combobox background color
--luna-combobox-color - Combobox text color
--luna-combobox-border - Combobox border color
--luna-combobox-radius - Combobox border radius
--luna-combobox-accent - Combobox accent color
--luna-combobox-shadow - Combobox box shadow
Events
luna-change - Emitted when the selected value(s) change
luna-clear - Emitted when the input is cleared via the clear button
luna-input - Emitted when the input value changes
luna-filter - Emitted when options are filtered, passes filtered options in detail
Properties
customFilter - Custom filter function

Example Code

<!-- Basic Autocomplete --> <luna-combobox label="Framework" placeholder="Type..." autocomplete> <luna-option value="react">React</luna-option> <luna-option value="vue">Vue.js</luna-option> <luna-option value="svelte">Svelte</luna-option> </luna-combobox> <!-- Allow Custom Values --> <luna-combobox allow-custom-value clearable> <luna-option value="js">JavaScript</luna-option> <luna-option value="py">Python</luna-option> </luna-combobox> <!-- Multiple Selection --> <luna-combobox multiple clearable> <luna-option value="html">HTML</luna-option> <luna-option value="css">CSS</luna-option> </luna-combobox> <!-- Grouped Options --> <luna-combobox> <luna-option-group label="Frontend"> <luna-option value="react">React</luna-option> </luna-option-group> </luna-combobox>