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
  fd3b19cc_c153_2176_2d2e_6b927f9e71c2["ComboxboxInputGroup()"]
  ba516b0d_684b_ceb8_f384_b4b96dbea5bc["combobox-input-group.tsx"]
  fd3b19cc_c153_2176_2d2e_6b927f9e71c2 -->|defined in| ba516b0d_684b_ceb8_f384_b4b96dbea5bc
  style fd3b19cc_c153_2176_2d2e_6b927f9e71c2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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