Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

WARNING: This component is in
Draft
status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

Combobox

Autocomplete input and command palette with a list of suggestions.

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add combobox
import {
  Combobox as QwikUICombobox,
  ComboboxControl as QwikUIComboboxControl,
  ComboboxInput as QwikUIComboboxInput,
  ComboboxLabel as QwikUIComboboxLabel,
  ComboboxListbox as QwikUIComboboxListbox,
  ComboboxOption as QwikUIComboboxOption,
  ComboboxPopover as QwikUIComboboxPopover,
  ComboboxTrigger as QwikUIComboboxTrigger,
} from '@qwik-ui/headless';
 
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
import { LuChevronDown } from '@qwikest/icons/lucide';
 
export const Combobox = component$<PropsOf<typeof QwikUICombobox>>((props) => {
  return (
    <QwikUICombobox
      {...props}
      class={cn(
        'bg-popover text-popover-foreground flex h-full w-48 flex-col overflow-hidden',
        props.class,
      )}
    >
      <Slot />
    </QwikUICombobox>
  );
});
 
export const ComboboxLabel = component$<PropsOf<typeof QwikUIComboboxLabel>>(
  ({ ...props }) => {
    return (
      <QwikUIComboboxLabel {...props} class={cn('text-sm', props.class)}>
        <Slot />
      </QwikUIComboboxLabel>
    );
  },
);
 
export const ComboboxControl = component$<PropsOf<typeof QwikUIComboboxControl>>(
  (props) => {
    return (
      <QwikUIComboboxControl
        {...props}
        class={cn('rounded-base relative flex items-center ', props.class)}
      >
        <Slot />
      </QwikUIComboboxControl>
    );
  },
);
 
export const ComboboxInput = component$<PropsOf<typeof QwikUIComboboxInput>>((props) => {
  return (
    <QwikUIComboboxInput
      {...props}
      class={cn(
        'placeholder:text-muted-foreground border-input flex h-10 w-full rounded-md border bg-transparent py-3 pl-2 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )}
    />
  );
});
 
export const ComboboxTrigger = component$<PropsOf<typeof QwikUIComboboxTrigger>>(
  ({ ...props }) => {
    return (
      <QwikUIComboboxTrigger
        {...props}
        class={cn('group absolute right-0 h-6 w-6', props.class)}
      >
        <LuChevronDown class="stroke-foreground transition-transform duration-500 group-aria-expanded:-rotate-180" />
      </QwikUIComboboxTrigger>
    );
  },
);
 
export const ComboboxPopover = component$<PropsOf<typeof QwikUIComboboxPopover>>(
  (props) => {
    return (
      <QwikUIComboboxPopover {...props} class={cn('bg-transparent', props.class)}>
        <Slot />
      </QwikUIComboboxPopover>
    );
  },
);
 
export const ComboboxListbox = component$<PropsOf<typeof QwikUIComboboxListbox>>(
  ({ ...props }) => {
    return (
      <QwikUIComboboxListbox
        {...props}
        class={cn('rounded-base bg-background w-48 border p-2', props.class)}
      >
        <Slot />
      </QwikUIComboboxListbox>
    );
  },
);
 
export const ComboboxOption = component$<PropsOf<typeof QwikUIComboboxOption>>(
  ({ ...props }) => {
    return (
      <QwikUIComboboxOption
        {...props}
        class={cn(
          'aria-disabled:text-muted-foreground data-[highlighted]:bg-accent text-foreground group flex justify-between gap-4 rounded-sm px-2 aria-disabled:font-light data-[highlighted]:cursor-pointer',
          props.class,
        )}
      >
        <Slot />
      </QwikUIComboboxOption>
    );
  },
);