Combobox

Multi-purpose combobox widget to allow selection from a dynamic set of options.

#
Documentation

#
Usage

import { Box } from "@optiaxiom/react";
import {
  Combobox,
  ComboboxCheckboxItem,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxScrollArea,
  ComboboxTrigger,
  ComboboxValue,
} from "@optiaxiom/react/unstable";
import { useState } from "react";
 
import { colors } from "./data";
 
export function App() {
  const [items, setItems] = useState(colors);
  const [value, setValue] = useState([colors[3]]);
 
  return (
    <Combobox
      isItemDisabled={(item) => Boolean(item.isDisabled)}
      items={items}
      itemToString={(item) => (item ? item.label : "")}
      onInputValueChange={(inputValue) => {
        setItems(
          colors.filter(
            (color) =>
              !inputValue ||
              color.label.toLowerCase().includes(inputValue.toLowerCase()),
          ),
        );
      }}
      onItemSelect={(value) =>
        setValue((prev) =>
          prev.includes(value)
            ? prev.filter((v) => v !== value)
            : [...prev, value],
        )
      }
      value={value}
    >
      <ComboboxTrigger w="224">
        <ComboboxValue placeholder="Select colors..." />
      </ComboboxTrigger>
 
      <ComboboxContent>
        <ComboboxInput />
 
        <ComboboxScrollArea>
          {items.map((item) => (
            <ComboboxCheckboxItem
              icon={
                <Box
                  rounded="sm"
                  style={{ aspectRatio: 1, backgroundColor: item.color }}
                />
              }
              item={item}
              key={item.value}
            >
              {item.label}
            </ComboboxCheckboxItem>
          ))}
 
          {items.length === 0 && <ComboboxEmpty>No result found</ComboboxEmpty>}
        </ComboboxScrollArea>
      </ComboboxContent>
    </Combobox>
  );
}

#
Anatomy

import {
  Combobox,
  ComboboxCheckboxItem,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxFooter,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxRadioItem,
  ComboboxScrollArea,
  ComboboxSeparator,
  ComboboxTrigger,
  ComboboxValue,
} from "@optiaxiom/react";
 
export default () => (
  <Combobox>
    <ComboboxTrigger>
      <ComboboxValue />
    </ComboboxTrigger>
 
    <ComboboxContent>
      <ComboboxInput />
 
      <ComboboxScrollArea>
        <ComboboxItem />
        <ComboboxCheckboxItem />
        <ComboboxRadioItem />
 
        <ComboboxGroup>
          <ComboboxLabel />
          <ComboboxItem />
          <ComboboxCheckboxItem />
          <ComboboxRadioItem />
        </ComboboxGroup>
 
        <ComboboxEmpty />
        <ComboboxSeparator />
      </ComboboxScrollArea>
 
      <ComboboxFooter />
    </ComboboxContent>
  </Combobox>
);

#
Related

Autocomplete

Text field with inline autocomplete to show suggestions while allowing freeform user input.

DropdownMenu

Display a dropdown menu.

Select

Single select combobox widget to allow selection from a fixed set of options.

#
Props

#
Combobox

Doesn't render its own HTML element.

Prop
defaultOpen false \| true Default: false
inputId string
inputValue string
isItemDisabled Return true if items need to be marked as disabled and skipped from keyboard navigation. (item: Item, index: number) => boolean Default: () => false
items* The items we want to render. Item[]
itemToKey Return a unique key for each item when the object reference will change during renders. (item: Item) => any Default: (value) => value
itemToString Return a string representation of items if they are objects. Needed to show selected values inside triggers. (item: Item) => string Default: (value) => (value ? String(value) : "")
itemToSubItems (value: Item) => Item[]
onInputValueChange ((inputValue: string) => void) & ((inputValue: string) => void)
onItemSelect (value: Item) => void
onOpenChange ((open: boolean) => void) & ((open: boolean) => void)
open false \| true
selectedItem Item
stateReducer (state: UseComboboxState<Item>, actionAndChanges: UseComboboxStateChangeOptions<Item>) => Partial<UseComboboxState<Item>>
value Item[] \| Set<Item>