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

Edit example

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

const links = [
  {
    href: "https://bsky.app/profile/ariakit.org",
    children: "Bluesky",
    target: "_blank",
  },
  {
    href: "https://www.facebook.com/ariakitjs",
    children: "Facebook",
    target: "_blank",
  },
  {
    href: "https://www.instagram.com/ariakitjs",
    children: "Instagram",
    target: "_blank",
  },
  {
    href: "https://discord.gg/WyHvnXsvMs",
    children: "Discord",
    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 (
    <Ariakit.ComboboxProvider
      open={open}
      setOpen={setOpen}
      setValue={(value) => startTransition(() => setSearchValue(value))}
    >
      <Ariakit.ComboboxLabel className="label">Links</Ariakit.ComboboxLabel>
      <Ariakit.Combobox
        placeholder="e.g., Bluesky"
        className="combobox"
        autoSelect
      />
      <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>
  );
}

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

const links = [
  {
    href: "https://bsky.app/profile/ariakit.org",
    children: "Bluesky",
    target: "_blank",
  },
  {
    href: "https://www.facebook.com/ariakitjs",
    children: "Facebook",
    target: "_blank",
  },
  {
    href: "https://www.instagram.com/ariakitjs",
    children: "Instagram",
    target: "_blank",
  },
  {
    href: "https://discord.gg/WyHvnXsvMs",
    children: "Discord",
    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 (
    <Ariakit.ComboboxProvider
      open={open}
      setOpen={setOpen}
      setValue={(value) => startTransition(() => setSearchValue(value))}
    >
      <Ariakit.ComboboxLabel className="label">Links</Ariakit.ComboboxLabel>
      <Ariakit.Combobox
        placeholder="e.g., Bluesky"
        className="combobox"
        autoSelect
      />
      <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>
  );
}

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.

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.

Combobox with TabsOrganizing Combobox with Tab components that support mouse, keyboard, and screen reader interactions. The UI remains responsive by using React.startTransition.

Command Menu with TabsCombining Dialog, Tab, and Combobox from Ariakit React to build a command palette 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.