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
  09bc864b_587d_71bf_3a8d_16472e2ec731["ComboboxWithGroupsAndSeparator()"]
  2937cee6_c7bc_534c_e19a_34ee5e8dc9b6["combobox-groups.tsx"]
  09bc864b_587d_71bf_3a8d_16472e2ec731 -->|defined in| 2937cee6_c7bc_534c_e19a_34ee5e8dc9b6
  style 09bc864b_587d_71bf_3a8d_16472e2ec731 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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