qwik-select

A select/autocomplete component for Qwik apps.

You can use the built-in unstyled component or build your own UI component with the core hook.

• Single select
• Multi-select
• Typeahead
• Async support (dynamically fetching data)
• Zero dependencies

Installation

  npm install qwik-select

Usage

import { component$, useStyles$, useStore } from "@builder.io/qwik";
import { Select } from "qwik-select";
import styles from "qwik-select/style.css?inline";

export default component$(() => {
  const state = useStore({
    items: ["One", "Two", "Three", "Four", "Five"],
    selectedItem: undefined,
  });

  useStyles$(styles);
  return (
    <div>
      <Select
        options={state.items}
        value={state.selectedItem}
        onSelect$={(it) => (state.selectedItem = it)}
        onClear$={() => (state.selectedItem = undefined)}
      />
    </div>
  );
});

See the documentation for more examples.

Acknowledgements

• solid-select
• svelte-select

License

MIT