ComboboxMultiple() — ui Function Reference

Architecture documentation for the ComboboxMultiple() function in combobox-multiple.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ComboboxMultiple() — ui Function Reference

Dependency Diagram

graph TD
  f4e20574_d610_c8dd_f36d_b25dff5b9b61["ComboboxMultiple()"]
  5dc2da61_c3b1_5bfa_8819_352c1e4ee916["combobox-multiple.tsx"]
  f4e20574_d610_c8dd_f36d_b25dff5b9b61 -->|defined in| 5dc2da61_c3b1_5bfa_8819_352c1e4ee916
  style f4e20574_d610_c8dd_f36d_b25dff5b9b61 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/combobox-multiple.tsx lines 25–59

export function ComboboxMultiple() {
  const anchor = useComboboxAnchor()

  return (
    <Combobox
      multiple
      autoHighlight
      items={frameworks}
      defaultValue={[frameworks[0]]}
    >
      <ComboboxChips ref={anchor} className="w-full max-w-xs">
        <ComboboxValue>
          {(values) => (
            <React.Fragment>
              {values.map((value: string) => (
                <ComboboxChip key={value}>{value}</ComboboxChip>
              ))}
              <ComboboxChipsInput />
            </React.Fragment>
          )}
        </ComboboxValue>
      </ComboboxChips>
      <ComboboxContent anchor={anchor}>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}