Skip to main content
Urbicon UI
source

Combobox

Searchable autocomplete input with keyboard navigation and custom filtering.

Loading syntax highlighting...

01 Examples

Per-option disabled

Disable individual options while the rest of the list stays selectable. Keyboard navigation skips disabled options — useful for assignee pickers where someone is on leave.
Loading syntax highlighting...

Helper, error & required

Combobox follows the same form-field contract as Input and Select — label, helper, error, and required all work as expected. `error` overrides `helper` when both are set.
We use this to schedule meetings
Loading syntax highlighting...

Custom filter

Replace the default case-insensitive contains-match with your own predicate — here, strict `startsWith` matching for command-style input.
Loading syntax highlighting...

Custom option renderer

Use the `customOption` snippet for rich list items — avatars, badges, secondary descriptions, status indicators.
Loading syntax highlighting...

02 Customization

Command Palette

A Spotlight-style command palette built with slotClasses on the base and input slots.
Loading syntax highlighting...

Glassmorphism

Frosted glass input for hero sections or overlay contexts.
Loading syntax highlighting...

Terminal / Monospace

Fully unstyled rebuild with a terminal aesthetic.
Loading syntax highlighting...

03 Accessibility

Built-in ARIA

The input uses role="combobox" with aria-expanded, aria-controls, and aria-autocomplete="list". The listbox uses role="listbox" and each option uses role="option" with aria-selected.

Keyboard

↓ / ↑ to navigate options. Enter to select. Escape to close. Home / End to jump to first / last option. Disabled options are skipped during navigation.

Active Descendant

Focus stays on the input at all times. The visually highlighted option is communicated via aria-activedescendant, keeping screen readers synchronized without moving DOM focus.

04 API Reference

30 props
30 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt