Are the ai2 Multi comboboxes free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Multi comboboxes

Five multi-select comboboxes that keep the trigger a plain search input and move the selection summary below it or into the panel footer: chips, a count badge, checkbox rows, an inline summary and a clear-all footer. Each is self-contained (no radix, no cmdk), sized, token-driven, and the panel stays open while you pick.

ComboboxMulti

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/combobox-multi

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/combobox-multi.tsx

"use client"

import * as React from "react"
import { Check, ChevronsUpDown, Eraser, Search, X } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Multi combobox family: 5 decorative SELF-CONTAINED multi-selects. NO radix, NO
   portal, NO cmdk. The TagsCombobox in essentials puts the selections INSIDE THE
   TRIGGER as chips; this family deliberately takes another route: the trigger
   always stays a plain search <input>, and the selection summary lives BELOW THE
   INPUT on a separate line (a chip series, a counter badge, a summary line) or in
   the panel footer. Each export is a complete combobox: the input filters, the
   arrow keys move the highlight, Enter toggles a selection, Escape closes. The
   selection persists while the panel is open. Color comes ONLY from tokens, via
   alpha color-mix. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const triggerHeight: Record<StyledSize, string> = {
  sm: "h-8",
  md: "h-9",
  lg: "h-10",
  xl: "h-12",
}

const panelWidth: Record<StyledSize, string> = {
  sm: "w-56",
  md: "w-64",
  lg: "w-72",
  xl: "w-80",
}

export interface ComboboxOption {
  value: string
  label: React.ReactNode
}

interface ComboboxProps {
  className?: string
  size?: StyledSize
  placeholder?: string
  options?: ComboboxOption[]
  value?: string
  defaultValue?: string
  onValueChange?: (v: string) => void
}

const defaultOptions: ComboboxOption[] = [
  { value: "next", label: "Next.js" },
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "svelte", label: "Svelte" },
  { value: "solid", label: "Solid" },
  { value: "astro", label: "Astro" },
]

function nodeText(node: React.ReactNode): string {
  if (node === null || node === undefined || typeof node === "boolean") return ""
  if (typeof node === "string" || typeof node === "number") return String(node)
  if (Array.isArray(node)) return node.map(nodeText).join("")
  if (React.isValidElement(node)) {
    return nodeText((node.props as { children?: React.ReactNode }).children)
  }
  return ""
}

function filterOptions(options: ComboboxOption[], query: string): ComboboxOption[] {
  const q = query.trim().toLowerCase()
  if (q.length === 0) return options
  return options.filter((o) => nodeText(o.label).toLowerCase().includes(q))
}

const rootBase = "relative"

const inputBase =
  "w-full rounded-lg border border-field-border bg-transparent pl-9 pr-9 text-sm text-foreground shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40"

const panelBase =
  "absolute left-0 right-0 top-full z-50 mt-2 min-w-56 origin-top overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg outline-none"

const listBase = "max-h-56 overflow-y-auto p-1.5"

const optionBase =
  "flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const emptyBase = "py-6 text-center text-sm text-muted-foreground"

const footerBase =
  "flex items-center justify-between gap-2 border-t border-border px-3 py-2 text-xs text-muted-foreground"

const panelMotion = {
  initial: { opacity: 0, scale: 0.98, y: -6 },
  animate: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.98, y: -6 },
}

/* Multi-selection state: the array of selected values plus filter, highlight and keyboard. The panel stays OPEN after a selection. */
function useMultiCombobox(props: ComboboxProps) {
  const { options = defaultOptions, defaultValue, onValueChange } = props
  const [selected, setSelected] = React.useState<string[]>(defaultValue ? [defaultValue] : [])
  const [open, setOpen] = React.useState(false)
  const [query, setQuery] = React.useState("")
  const [active, setActive] = React.useState(0)

  const wrapperRef = React.useRef<HTMLDivElement>(null)
  const uid = React.useId()
  const listId = `${uid}-list`
  const optionId = React.useCallback((i: number) => `${uid}-option-${i}`, [uid])

  const filtered = React.useMemo(() => filterOptions(options, query), [options, query])

  React.useEffect(() => {
    setActive((prev) => (prev >= filtered.length ? 0 : prev))
  }, [filtered.length])

  React.useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false)
    }
    const onPointer = (e: PointerEvent) => {
      const node = wrapperRef.current
      if (node && e.target instanceof Node && !node.contains(e.target)) setOpen(false)
    }
    window.addEventListener("keydown", onKey)
    window.addEventListener("pointerdown", onPointer)
    return () => {
      window.removeEventListener("keydown", onKey)
      window.removeEventListener("pointerdown", onPointer)
    }
  }, [open])

  const toggle = React.useCallback(
    (v: string) => {
      setSelected((prev) => (prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v]))
      onValueChange?.(v)
    },
    [onValueChange]
  )

  const clear = React.useCallback(() => {
    setSelected([])
  }, [])

  const onInputKeyDown = React.useCallback(
    (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (e.key === "ArrowDown") {
        e.preventDefault()
        setOpen(true)
        setActive((prev) => (filtered.length === 0 ? 0 : (prev + 1) % filtered.length))
      } else if (e.key === "ArrowUp") {
        e.preventDefault()
        setOpen(true)
        setActive((prev) =>
          filtered.length === 0 ? 0 : (prev - 1 + filtered.length) % filtered.length
        )
      } else if (e.key === "Enter") {
        e.preventDefault()
        const item = filtered[active]
        if (item) toggle(item.value)
      } else if (e.key === "Escape") {
        e.preventDefault()
        setOpen(false)
      }
    },
    [filtered, active, toggle]
  )

  const selectedOptions = React.useMemo(
    () =>
      selected
        .map((v) => options.find((o) => o.value === v))
        .filter((o): o is ComboboxOption => o !== undefined),
    [selected, options]
  )

  return {
    options,
    selected,
    selectedOptions,
    open,
    setOpen,
    query,
    setQuery,
    active,
    setActive,
    filtered,
    toggle,
    clear,
    onInputKeyDown,
    wrapperRef,
    listId,
    optionId,
  }
}

type MultiState = ReturnType<typeof useMultiCombobox>

/* Presentation shell: a plain search input plus a panel. The panel body arrives through children; the summary falls BELOW the input (the point that separates it from Tags). */
function MultiField({
  state,
  size,
  className,
  placeholder,
  trailing,
  summary,
  children,
}: {
  state: MultiState
  size: StyledSize
  className?: string
  placeholder: string
  trailing?: React.ReactNode
  summary?: React.ReactNode
  children: React.ReactNode
}) {
  const reduce = useReducedMotion() ?? false
  const { open, setOpen, setQuery, query, active, filtered, onInputKeyDown, wrapperRef, listId, optionId } =
    state

  const activeId = open && filtered[active] ? optionId(active) : undefined

  return (
    <div
      ref={wrapperRef}
      data-slot="styled-combobox"
      className={cn(rootBase, panelWidth[size], className)}
    >
      <div className="relative">
        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
        <input
          role="combobox"
          aria-expanded={open}
          aria-controls={listId}
          aria-autocomplete="list"
          aria-activedescendant={activeId}
          value={query}
          placeholder={placeholder}
          onFocus={() => setOpen(true)}
          onChange={(e) => {
            setOpen(true)
            setQuery(e.target.value)
          }}
          onKeyDown={onInputKeyDown}
          className={cn(inputBase, triggerHeight[size])}
        />
        <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:size-4 [&_i]:text-base [&_i]:leading-none">
          {trailing ?? <ChevronsUpDown className="opacity-70" />}
        </span>
      </div>

      {summary}

      <AnimatePresence>
        {open ? (
          <motion.div
            id={listId}
            role="listbox"
            aria-multiselectable="true"
            className={panelBase}
            initial={reduce ? { opacity: 0 } : panelMotion.initial}
            animate={reduce ? { opacity: 1 } : panelMotion.animate}
            exit={reduce ? { opacity: 0 } : panelMotion.exit}
            transition={reduce ? { duration: 0 } : { duration: 0.16, ease: "easeOut" }}
          >
            {children}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* The shared multi option rows; the leading element changes per variant. */
function MultiRows({
  state,
  leading,
}: {
  state: MultiState
  leading?: (isSelected: boolean) => React.ReactNode
}) {
  const { filtered, active, setActive, selected, toggle, optionId } = state
  if (filtered.length === 0) return <p className={emptyBase}>No results found.</p>
  return (
    <>
      {filtered.map((option, i) => {
        const isActive = i === active
        const isSelected = selected.includes(option.value)
        return (
          <div
            key={option.value}
            id={optionId(i)}
            role="option"
            tabIndex={-1}
            aria-selected={isSelected}
            onMouseEnter={() => setActive(i)}
            onClick={() => toggle(option.value)}
            className={cn(optionBase, isActive && "bg-accent text-accent-foreground")}
          >
            {leading ? leading(isSelected) : null}
            <span className="flex-1 truncate">{option.label}</span>
            {!leading && isSelected ? <Check className="text-foreground" /> : null}
          </div>
        )
      })}
    </>
  )
}

/* ChipsCombobox: the selected items line up as a row of round chips BELOW THE INPUT; each chip is removed with its own X. The trigger stays plain. */
export function ChipsCombobox(props: ComboboxProps) {
  const { className, size = "md", placeholder = "Search framework..." } = props
  const state = useMultiCombobox(props)
  const { selectedOptions, toggle } = state

  return (
    <MultiField
      state={state}
      size={size}
      className={className}
      placeholder={placeholder}
      summary={
        selectedOptions.length > 0 ? (
          <div className="mt-2 flex flex-wrap gap-1.5">
            {selectedOptions.map((option) => (
              <span
                key={option.value}
                className="inline-flex items-center gap-1 rounded-full bg-[color-mix(in_oklab,var(--color-primary)_14%,transparent)] px-2.5 py-0.5 text-xs font-medium text-foreground"
              >
                {option.label}
                <button
                  type="button"
                  aria-label={`Remove ${nodeText(option.label)}`}
                  onClick={() => toggle(option.value)}
                  className="inline-flex rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3 [&_i]:text-xs [&_i]:leading-none"
                >
                  <X />
                </button>
              </span>
            ))}
          </div>
        ) : null
      }
    >
      <div className={listBase}>
        <MultiRows state={state} />
      </div>
    </MultiField>
  )
}

/* CountCombobox: chip yok. Input sagindaki sayac rozeti kac secim oldugunu soyler. */
export function CountCombobox(props: ComboboxProps) {
  const { className, size = "md", placeholder = "Search framework..." } = props
  const state = useMultiCombobox(props)
  const { selected } = state

  return (
    <MultiField
      state={state}
      size={size}
      className={className}
      placeholder={placeholder}
      trailing={
        selected.length > 0 ? (
          <span className="inline-flex min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold leading-5 text-primary-foreground">
            {selected.length}
          </span>
        ) : undefined
      }
    >
      <div className={listBase}>
        <MultiRows state={state} />
      </div>
      <div className={footerBase}>
        <span>
          {selected.length} of {state.options.length} selected
        </span>
      </div>
    </MultiField>
  )
}

/* ChecksCombobox: every row carries a checkbox; a readable, form-like list. */
export function ChecksCombobox(props: ComboboxProps) {
  const { className, size = "md", placeholder = "Search framework..." } = props
  const state = useMultiCombobox(props)

  return (
    <MultiField state={state} size={size} className={className} placeholder={placeholder}>
      <div className={listBase}>
        <MultiRows
          state={state}
          leading={(isSelected) => (
            <span
              className={cn(
                "flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-border transition-colors",
                isSelected && "border-transparent bg-primary text-primary-foreground"
              )}
            >
              {isSelected ? <Check className="size-3" /> : null}
            </span>
          )}
        />
      </div>
    </MultiField>
  )
}

/* InlineMultiCombobox: the selection summary is one comma-separated line under the input; the plainest and narrowest multi-select. */
export function InlineMultiCombobox(props: ComboboxProps) {
  const { className, size = "md", placeholder = "Search framework..." } = props
  const state = useMultiCombobox(props)
  const { selectedOptions } = state

  const summaryText = selectedOptions.map((o) => nodeText(o.label)).join(", ")

  return (
    <MultiField
      state={state}
      size={size}
      className={className}
      placeholder={placeholder}
      summary={
        <p className="mt-1.5 truncate px-1 text-xs text-muted-foreground">
          {summaryText.length > 0 ? (
            <>
              <span className="font-medium text-foreground">Selected: </span>
              {summaryText}
            </>
          ) : (
            "Nothing selected yet."
          )}
        </p>
      }
    >
      <div className={listBase}>
        <MultiRows state={state} />
      </div>
    </MultiField>
  )
}

/* ClearCombobox: panel altliginda secim sayaci + "Clear all"; input saginda da
   hizli temizleme dugmesi. */
export function ClearCombobox(props: ComboboxProps) {
  const { className, size = "md", placeholder = "Search framework..." } = props
  const state = useMultiCombobox(props)
  const { selected, clear } = state

  return (
    <MultiField
      state={state}
      size={size}
      className={className}
      placeholder={placeholder}
      trailing={
        selected.length > 0 ? (
          <span className="pointer-events-auto inline-flex">
            <button
              type="button"
              aria-label="Clear selection"
              onClick={clear}
              className="inline-flex size-5 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_i]:text-sm [&_i]:leading-none"
            >
              <X />
            </button>
          </span>
        ) : undefined
      }
    >
      <div className={listBase}>
        <MultiRows state={state} />
      </div>
      <div className={footerBase}>
        <span>{selected.length} selected</span>
        <button
          type="button"
          onClick={clear}
          disabled={selected.length === 0}
          className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 font-medium text-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"
        >
          <Eraser />
          Clear all
        </button>
      </div>
    </MultiField>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Chips

Selections become round chips below the input.

Count

A count badge replaces the chevron; a footer totals it.

Checks

Every row carries a checkbox, like a small form.

Inline

A single comma-separated summary line below the input.

Nothing selected yet.

Clear

A footer counter with a clear-all action.

ai2 Multi comboboxes: 5 styled variations on the token system

The ai2 Multi comboboxes are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around multi-select searchable menus that summarize the selection outside the trigger. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion fades and scales the option panel in from the input. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the scale is skipped and the panel appears instantly.

What is in the ai2 Multi comboboxes?

5 exports in one file: Chips, Count, Checks, Inline and Clear. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion fades and scales the option panel in from the input.
Reduced-motion aware: Under prefers-reduced-motion, the scale is skipped and the panel appears instantly.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Multi comboboxes sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.