ComboxboxInputGroup() — ui Function Reference

Architecture documentation for the ComboxboxInputGroup() function in combobox-input-group.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ComboxboxInputGroup() — ui Function Reference

Dependency Diagram

graph TD
  06419922_f7fa_0c1e_1c28_bec9aa32042f["ComboxboxInputGroup()"]
  15fa48a9_59cd_7075_f86e_38a5b78f58d2["combobox-input-group.tsx"]
  06419922_f7fa_0c1e_1c28_bec9aa32042f -->|defined in| 15fa48a9_59cd_7075_f86e_38a5b78f58d2
  style 06419922_f7fa_0c1e_1c28_bec9aa32042f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/combobox-input-group.tsx lines 53–80

export function ComboxboxInputGroup() {
  return (
    <Combobox items={timezones}>
      <ComboboxInput placeholder="Select a timezone">
        <InputGroupAddon>
          <GlobeIcon />
        </InputGroupAddon>
      </ComboboxInput>
      <ComboboxContent alignOffset={-28} className="w-60">
        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
        <ComboboxList>
          {(group) => (
            <ComboboxGroup key={group.value} items={group.items}>
              <ComboboxLabel>{group.value}</ComboboxLabel>
              <ComboboxCollection>
                {(item) => (
                  <ComboboxItem key={item} value={item}>
                    {item}
                  </ComboboxItem>
                )}
              </ComboboxCollection>
            </ComboboxGroup>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}