Combobox

Searchable Minecraft suggestions with single and multiple choices.

Preview

Loading example...

To run this copied example, install these items using the linked CLI or manual instructions:

combobox

Usage

Import Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem and ComboboxEmpty from @/components/ui/combobox. Supply items and the List render callback. The primary example controls a string | null value and exposes clearing with showClear.

Composition

For multiple values, set multiple, use a string array and render chips through ComboboxValue. Create a ref with useComboboxAnchor, attach it to ComboboxChips and pass it to ComboboxContent as anchor. ComboboxChipsInput needs its own accessible name. The named example disables Bedrock without hiding it.

API and accessibility

Input defaults to showTrigger={true} and showClear={false}. List surface is suggestions or popup; Content defaults bottom/start with zero offsets. Chips show removal by default, and Clear/ChipRemove supply accessible names. Filtering and keyboard semantics come from Base UI. Popup positioning, chips and the combined widget are web adaptations; native coverage applies to declared input/list constituents.

See the underlying API for shared semantics.

Multiple inventory chips

Loading example...

To run this copied example, install these items using the linked CLI or manual instructions:

combobox

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

"use client";

import { Combobox as Primitive } from "@base-ui/react";
import * as React from "react";

import { Button } from "./button";
import { Input } from "./input";
import { minecraftCardSprite } from "./minecraft-card-sprite";
import { MenuScaleContext, menuTextNodes } from "./minecraft-menu-text";
import {
  isMinecraftClassResolver,
  isMinecraftRenderCallback,