@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,
	ComboboxContent,
	ComboboxGroup,
	ComboboxGroupLabel,
	ComboboxInput,
	ComboboxItem,
	ComboboxItemValue,
	ComboboxSeparator,
} from "@ngrok/mantle/combobox";
import { CirclesThreePlus } from "@phosphor-icons/react/CirclesThreePlus";

<Combobox>
	<ComboboxInput />
	<ComboboxContent>
		<ComboboxGroup>
			<ComboboxGroupLabel>
				Choose an ngrok subdomain
			</ComboboxGroupLabel>
			<ComboboxItem value="https://" disabled>
				<ComboboxItemValue />
			</ComboboxItem>
			<ComboboxItem value="https://${random}.ngrok.app">
				<CirclesThreePlus
					weight="duotone"
					className="text-accent-600"
				/>
				<ComboboxItemValue />
			</ComboboxItem>
			<ComboboxItem value="https://${random}.ngrok.dev">
				<ComboboxItemValue />
			</ComboboxItem>
			<ComboboxItem value="https://${random}.ngrok.io">
				<ComboboxItemValue />
			</ComboboxItem>
		</ComboboxGroup>
		<ComboboxSeparator />
		<ComboboxItem>
			Sit dolor enim eiusmod nulla nostrud officia in magna deserunt
			ut ex veniam cillum.
		</ComboboxItem>
	</ComboboxContent>
</Combobox>