ComboboxWithCustomItems() — ui Function Reference

Architecture documentation for the ComboboxWithCustomItems() function in combobox-custom.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ComboboxWithCustomItems() — ui Function Reference

Dependency Diagram

graph TD
  b8080f27_96dd_571e_9030_9b8e5522f17f["ComboboxWithCustomItems()"]
  0278247f_1dd1_8429_e6c2_ac1c908689e6["combobox-custom.tsx"]
  b8080f27_96dd_571e_9030_9b8e5522f17f -->|defined in| 0278247f_1dd1_8429_e6c2_ac1c908689e6
  style b8080f27_96dd_571e_9030_9b8e5522f17f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/combobox-custom.tsx lines 71–99

export function ComboboxWithCustomItems() {
  return (
    <Combobox
      items={countries.filter((country) => country.code !== "")}
      itemToStringValue={(country: (typeof countries)[number]) => country.label}
    >
      <ComboboxInput placeholder="Search countries..." />
      <ComboboxContent>
        <ComboboxEmpty>No countries found.</ComboboxEmpty>
        <ComboboxList>
          {(country) => (
            <ComboboxItem key={country.code} value={country}>
              <Item size="xs" className="p-0">
                <ItemContent>
                  <ItemTitle className="whitespace-nowrap">
                    {country.label}
                  </ItemTitle>
                  <ItemDescription>
                    {country.continent} ({country.code})
                  </ItemDescription>
                </ItemContent>
              </Item>
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}