Combobox

Combobox

An autocomplete input combining text input with a filterable dropdown list.

Basic Usage

Default Combobox

Type to filter options.

<ae-combo placeholder="Select a fruit">
<ae-combo-option value="apple">Apple</ae-combo-option>
<ae-combo-option value="banana">Banana</ae-combo-option>
<ae-combo-option value="cherry">Cherry</ae-combo-option>
<ae-combo-option value="grape">Grape</ae-combo-option>
<ae-combo-option value="orange">Orange</ae-combo-option>
</ae-combo>

With Label

Labeled Combobox

Add a label for better UX.

<ae-combo label="Country" placeholder="Search countries">
<ae-combo-option value="us">United States</ae-combo-option>
<ae-combo-option value="uk">United Kingdom</ae-combo-option>
<ae-combo-option value="ca">Canada</ae-combo-option>
<ae-combo-option value="au">Australia</ae-combo-option>
<ae-combo-option value="de">Germany</ae-combo-option>
<ae-combo-option value="fr">France</ae-combo-option>
</ae-combo>

Free Input

Allow Free Input

Accept values not in the list.

<ae-combo label="Tag" placeholder="Enter or select a tag" free-input>
<ae-combo-option value="bug">Bug</ae-combo-option>
<ae-combo-option value="feature">Feature</ae-combo-option>
<ae-combo-option value="docs">Documentation</ae-combo-option>
</ae-combo>

Disabled

Disabled State

Disabled combobox.

<ae-combo label="Category" placeholder="Select..." disabled>
<ae-combo-option value="1">Option 1</ae-combo-option>
<ae-combo-option value="2">Option 2</ae-combo-option>
</ae-combo>

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

Import

import { defineAeCombo, defineAeComboOption } from '@aetherui-kit/core/combo';
defineAeCombo();
defineAeComboOption();

Props

Name	Type	Default	Description
value	string	''	Current value
placeholder	string	'Select an option'	Placeholder text
label	string	''	Label text
name	string	''	Form field name
disabled	boolean	false	Disabled state
free-input	boolean	true	Allow custom values

Events

Name	Detail	Description
ae-combo-change	{ value: string }	Fired when value changes
ae-combo-input	{ value: string }	Fired on input

Slots

Name	Description
default	Combo options (ae-combo-option)

CSS Parts

Name	Description
base	Container
input	Text input
listbox	Options container
option	Individual option

Accessibility

• Uses role="combobox" pattern
• Keyboard navigation (Arrow keys, Enter, Escape)
• Screen reader announcements