ComboboxWithGroupsAndSeparator() — ui Function Reference

Architecture documentation for the ComboboxWithGroupsAndSeparator() function in combobox-groups.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ComboboxWithGroupsAndSeparator() — ui Function Reference

Dependency Diagram

graph TD
  53627e35_ab28_c96e_4cfb_ca3682c7fba0["ComboboxWithGroupsAndSeparator()"]
  d9da57c6_aee4_48f3_f2cb_86e6d1fbab67["combobox-groups.tsx"]
  53627e35_ab28_c96e_4cfb_ca3682c7fba0 -->|defined in| d9da57c6_aee4_48f3_f2cb_86e6d1fbab67
  style 53627e35_ab28_c96e_4cfb_ca3682c7fba0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/combobox-groups.tsx lines 52–76

export function ComboboxWithGroupsAndSeparator() {
  return (
    <Combobox items={timezones}>
      <ComboboxInput placeholder="Select a timezone" />
      <ComboboxContent>
        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
        <ComboboxList>
          {(group, index) => (
            <ComboboxGroup key={group.value} items={group.items}>
              <ComboboxLabel>{group.value}</ComboboxLabel>
              <ComboboxCollection>
                {(item) => (
                  <ComboboxItem key={item} value={item}>
                    {item}
                  </ComboboxItem>
                )}
              </ComboboxCollection>
              {index < timezones.length - 1 && <ComboboxSeparator />}
            </ComboboxGroup>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}