build69 / Components / ComboboxAsyncMulti / Source

ComboboxAsyncMulti

Multi-select counterpart to ComboboxAsync: the same host-driven async loading, spinner, error-and-retry panel, creatable and free-solo rows and grouped results, but the trigger carries one removable chip per value with a "+N more" count past `maxChips`. `maxValues` caps how many can be picked, and Backspace or Delete on the trigger removes the last chip. Values the current result set no longer contains still render as chips using the raw value as the label.

Open docs ← Back to catalog

3 files2 dependenciestokens resolved ✓

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { surface, type Tone, type Emphasis } from "@/lib/recipes";

// ComboboxAsyncMulti — Multi-select counterpart to ComboboxAsync: the same host-driven async loading, spinner, 
export interface ComboboxAsyncMultiProps extends React.ComponentProps<"div"> {
  /** Semantic role: which accent the component uses. */
  tone?: Tone;
  /** Visual loudness: how prominent it reads. */
  emphasis?: Emphasis;
}

export function ComboboxAsyncMulti({
  className,
  tone = "primary",
  emphasis = "solid",
  ...props
}: ComboboxAsyncMultiProps) {
  return (
    <div
      data-slot="combobox-async-multi"
      data-tone={tone}
      data-emphasis={emphasis}
      className={cn(
        "inline-flex items-center gap-2 rounded-lg transition-colors",
        surface(tone, emphasis),
        className,
      )}
      {...props}
    />
  );
}