Combobox with links

Using a Combobox with items rendered as links that can be clicked with keyboard and mouse. This is useful for creating an accessible page search input in React.

Combobox Concurrent React Search Dropdowns Form controls

Links

Edit withVite Next.js

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
import "./style.css";
import { startTransition, useMemo, useState } from "react";
import * as Ariakit from "@ariakit/react";
import { matchSorter } from "match-sorter";
import { NewWindow } from "./icons.jsx";

const links = [
  {
    href: "https://twitter.com/ariakitjs",
    children: "Twitter",
    target: "_blank",
  },
  {
    href: "https://www.facebook.com/ariakitjs",
    children: "Facebook",
    target: "_blank",
  },
  {
    href: "https://www.instagram.com/ariakitjs",
    children: "Instagram",
    target: "_blank",
  },
  { href: "https://ariakit.org", children: "Ariakit.org" },
];

export default function Example() {
  const [open, setOpen] = useState(false);
  const [searchValue, setSearchValue] = useState("");

  const matches = useMemo(() => {
    return matchSorter(links, searchValue, {
      keys: ["children"],
      baseSort: (a, b) => (a.index < b.index ? -1 : 1),
    });
  }, [searchValue]);

  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider
        open={open}
        setOpen={setOpen}
        setValue={(value) => startTransition(() => setSearchValue(value))}
      >
        <label className="label">
          Links
          <Ariakit.Combobox
            placeholder="e.g., Twitter"
            className="combobox"
            autoSelect
          />
        </label>
        <Ariakit.ComboboxPopover
          gutter={4}
          sameWidth
          unmountOnHide
          className="popover"
        >
          {matches.length ? (
            matches.map(({ children, ...props }) => (
              <Ariakit.ComboboxItem
                key={children}
                focusOnHover
                hideOnClick
                className="combobox-item"
                render={<a {...props} />}
              >
                {children}
                {props.target === "_blank" && (
                  <NewWindow className="combobox-item-icon" />
                )}
              </Ariakit.ComboboxItem>
            ))
          ) : (
            <div className="no-results">No results found</div>
          )}
        </Ariakit.ComboboxPopover>
      </Ariakit.ComboboxProvider>
    </div>
  );
}

import "./style.css";
import { startTransition, useMemo, useState } from "react";
import * as Ariakit from "@ariakit/react";
import { matchSorter } from "match-sorter";
import { NewWindow } from "./icons.jsx";

const links = [
  {
    href: "https://twitter.com/ariakitjs",
    children: "Twitter",
    target: "_blank",
  },
  {
    href: "https://www.facebook.com/ariakitjs",
    children: "Facebook",
    target: "_blank",
  },
  {
    href: "https://www.instagram.com/ariakitjs",
    children: "Instagram",
    target: "_blank",
  },
  { href: "https://ariakit.org", children: "Ariakit.org" },
];

export default function Example() {
  const [open, setOpen] = useState(false);
  const [searchValue, setSearchValue] = useState("");

  const matches = useMemo(() => {
    return matchSorter(links, searchValue, {
      keys: ["children"],
      baseSort: (a, b) => (a.index < b.index ? -1 : 1),
    });
  }, [searchValue]);

  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider
        open={open}
        setOpen={setOpen}
        setValue={(value) => startTransition(() => setSearchValue(value))}
      >
        <label className="label">
          Links
          <Ariakit.Combobox
            placeholder="e.g., Twitter"
            className="combobox"
            autoSelect
          />
        </label>
        <Ariakit.ComboboxPopover
          gutter={4}
          sameWidth
          unmountOnHide
          className="popover"
        >
          {matches.length ? (
            matches.map(({ children, ...props }) => (
              <Ariakit.ComboboxItem
                key={children}
                focusOnHover
                hideOnClick
                className="combobox-item"
                render={<a {...props} />}
              >
                {children}
                {props.target === "_blank" && (
                  <NewWindow className="combobox-item-icon" />
                )}
              </Ariakit.ComboboxItem>
            ))
          ) : (
            <div className="no-results">No results found</div>
          )}
        </Ariakit.ComboboxPopover>
      </Ariakit.ComboboxProvider>
    </div>
  );
}

Components

ComboboxFill in a React input field with autocomplete & autosuggest functionalities. Choose from a list of suggested values with full keyboard support. This component is based on the WAI-ARIA Combobox Pattern.

View all components

Rendering a link

The ComboboxItem component can be rendered as a link using the render prop:

<ComboboxItem
  {...specificComboboxItemProps}
  render={<a {...specificAnchorProps} />}
/>
<ComboboxItem
  {...specificComboboxItemProps}
  render={<a {...specificAnchorProps} />}
/>

You can learn more about this pattern on the Composition guide.

Link features

When rendered as a link, ComboboxItem supports all native link behaviors, including:

Open in a new tab in the background: ⌘ Enter
Open in a new tab and switch to the tab: ⌘ Shift Enter
Open in new window: Shift Enter
Download: Alt Enter

Related examples

Combobox filteringListing suggestions in a Combobox component based on the input value using React.startTransition to ensure the UI remains responsive during typing.

Combobox with integrated filterFiltering options in a Combobox component through an abstracted implementation using React.useDeferredValue, resulting in a simple higher-level API.

Animated ComboboxAnimating a Combobox using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover using the animated prop.

ComboboxGroupOrganizing Combobox items into labelled groups using the ComboboxGroup and ComboboxGroupLabel components in React.

ComboboxCancelReseting the value of a Combobox with a button rendered next to it using the ComboboxCancel component.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

View all examples

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue