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.

1import { Combobox } from "@ngrok/mantle/combobox";2import { CirclesThreePlusIcon } from "@phosphor-icons/react/CirclesThreePlus";3 4<Combobox.Root>5	<Combobox.Input />6	<Combobox.Content>7		<Combobox.Group>8			<Combobox.GroupLabel>Choose an ngrok subdomain</Combobox.GroupLabel>9			<Combobox.Item value="https://" disabled>10				<Combobox.ItemValue />11			</Combobox.Item>12			<Combobox.Item value="https://${random}.ngrok.app">13				<CirclesThreePlusIcon weight="duotone" className="text-accent-600" />14				<Combobox.ItemValue />15			</Combobox.Item>16			<Combobox.Item value="https://${random}.ngrok.dev">17				<Combobox.ItemValue />18			</Combobox.Item>19			<Combobox.Item value="https://${random}.ngrok.io">20				<Combobox.ItemValue />21			</Combobox.Item>22		</Combobox.Group>23		<Combobox.Separator />24		<Combobox.Item>25			Sit dolor enim eiusmod nulla nostrud officia in magna deserunt ut ex veniam cillum.26		</Combobox.Item>27	</Combobox.Content>28</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:

Prop	Type	Default	Description
`autoComplete?`	`string`	`"list"`	The autocomplete behavior of the input.
`autoSelect?`	`"always" \| "inline" \| boolean`	`"always"`	How the first item is automatically selected.
`validation?`	`"error" \| "success" \| "warning" \| false \| (() => "error" \| "success" \| "warning" \| false)`		Validation state that changes the border and outline.

Combobox.Content

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

All props from ariakit ComboboxPopover, plus:

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.
`sameWidth?`	`boolean`	`true`	Whether the popover should be the same width as the input.
`unmountOnHide?`	`boolean`	`true`	Whether the popover should unmount when hidden.

Combobox.Item

Renders a combobox item inside a Combobox.Content component.

All props from ariakit ComboboxItem, plus:

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.
`focusOnHover?`	`boolean`	`true`	Whether the item should receive focus on hover.

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:

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.

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:

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.

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:

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.

Combobox.Separator

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

All props from Separator.