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
  b435cc0e_3b0c_91fb_c615_3eba78a7bfd4["ComboboxWithCustomItems()"]
  272fd075_9d24_81cf_dbdf_22091880b278["combobox-custom.tsx"]
  b435cc0e_3b0c_91fb_c615_3eba78a7bfd4 -->|defined in| 272fd075_9d24_81cf_dbdf_22091880b278
  style b435cc0e_3b0c_91fb_c615_3eba78a7bfd4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/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>
  )
}