@ngrok/mantle — Combobox

Preview

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 Patternand 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>