Combobox

A filterable fruit list that demonstrates the complete Combobox composition with keyboard navigation.

Package: @solidiom/combobox
Version: 0.0.1-next.0
Status: stable

Examples

The live example filters a fruit list as you type. Use ArrowDown and ArrowUp to navigate items, Enter to select the highlighted item, and Escape to close the listbox. The input retains focus throughout the interaction using the active-descendant pattern.

The filter logic runs in the consumer, not inside the primitive. This keeps Combobox agnostic to matching strategy so consumers can implement fuzzy, substring, or server-side search.

Fruit

View source

        export function ComboboxExample(props: ComboboxExampleProps) {
  const [filter, setFilter] = createSignal("")

  const filteredItems = () => {
    const query = filter().toLowerCase()
    if (!query) return ITEMS
    return ITEMS.filter(
      (item) =>
        item.label[props.locale].toLowerCase().includes(query) ||
        item.value.toLowerCase().includes(query),
    )
  }

  const copy = () => COPY[props.locale]

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="combobox-example"
      data-combobox-example
    >
      <label class="combobox-example__label" id="combobox-example-label">
        {copy().label}
      </label>
      <Combobox.Root>
        <Combobox.Input
          placeholder={copy().placeholder}
          onFilter={setFilter}
          class="combobox-example__input"
        />
        <Combobox.Content class="combobox-example__content">
          <For each={filteredItems()}>
            {(item) => (
              <Combobox.Item value={item.value} textValue={item.label[props.locale]}>
                <Combobox.ItemText>{item.label[props.locale]}</Combobox.ItemText>
              </Combobox.Item>
            )}
          </For>
        </Combobox.Content>
      </Combobox.Root>
    </div>
  )
}