Combobox

Fill 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 and is powered by the ariakit Combobox.

import { Combobox } from "@ngrok/mantle/combobox";
import { CirclesThreePlusIcon } from "@phosphor-icons/react/CirclesThreePlus";

<Combobox.Root>
	<Combobox.Input />
	<Combobox.Content>
		<Combobox.Group>
			<Combobox.GroupLabel>Choose an ngrok subdomain</Combobox.GroupLabel>
			<Combobox.Item value="https://" disabled>
				<Combobox.ItemValue />
			</Combobox.Item>
			<Combobox.Item value="https://${random}.ngrok.app">
				<CirclesThreePlusIcon weight="duotone" className="text-accent-600" />
				<Combobox.ItemValue />
			</Combobox.Item>
			<Combobox.Item value="https://${random}.ngrok.dev">
				<Combobox.ItemValue />
			</Combobox.Item>
			<Combobox.Item value="https://${random}.ngrok.io">
				<Combobox.ItemValue />
			</Combobox.Item>
		</Combobox.Group>
		<Combobox.Separator />
		<Combobox.Item>
			Sit dolor enim eiusmod nulla nostrud officia in magna deserunt ut ex veniam cillum.
		</Combobox.Item>
	</Combobox.Content>
</Combobox.Root>;

API Reference

The Combobox components are built on top of ariakit Combobox.

Combobox.Root

Root component for a combobox. Provides a combobox store that controls the state of Combobox components.

All props from ariakit ComboboxProvider.

Combobox.Input

Renders a combobox input element that can be used to filter a list of items.

All props from ariakit Combobox, plus:

Combobox.Content

Renders a popover that contains combobox content, e.g. items, groups, and separators.

All props from ariakit ComboboxPopover, plus:

Combobox.Item

Renders a combobox item inside a Combobox.Content component.

All props from ariakit ComboboxItem, plus:

Combobox.ItemValue

Highlights the match between the current Combobox.Input value and parent Combobox.Item value. Should only be used as a child of Combobox.Item.

All props from ariakit ComboboxItemValue, plus:

Combobox.Group

Renders a group for Combobox.Item elements. Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.

All props from ariakit ComboboxGroup, plus:

Combobox.GroupLabel

Renders a label in a combobox group. Should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.

All props from ariakit ComboboxGroupLabel, plus:

Combobox.Separator

Renders a separator between Combobox.Items or Combobox.Groups.

All props from Separator.