ComboboxDemo() — ui Function Reference

Architecture documentation for the ComboboxDemo() function in combobox-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ComboboxDemo() — ui Function Reference

Dependency Diagram

graph TD
  f9b6ee80_bef1_7d4b_db31_ea53b70abce1["ComboboxDemo()"]
  b41756a0_e7f5_8860_3e5e_716f0432f867["combobox-demo.tsx"]
  f9b6ee80_bef1_7d4b_db31_ea53b70abce1 -->|defined in| b41756a0_e7f5_8860_3e5e_716f0432f867
  style f9b6ee80_bef1_7d4b_db31_ea53b70abce1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/combobox-demo.tsx lines 57–145

export function ComboboxDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      {/* Basic combobox. */}
      <div className="flex flex-wrap items-start gap-4">
        <Combobox items={frameworks}>
          <ComboboxInput placeholder="Select a framework" />
          <ComboboxContent>
            <ComboboxEmpty>No items found.</ComboboxEmpty>
            <ComboboxList>
              {(item) => (
                <ComboboxItem key={item} value={item}>
                  {item}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
      </div>
      {/* With clear button. */}
      <div className="flex flex-wrap items-start gap-4">
        <Combobox items={frameworks} defaultValue={frameworks[0]}>
          <ComboboxInput placeholder="Select a framework" showClear />
          <ComboboxContent>
            <ComboboxEmpty>No items found.</ComboboxEmpty>
            <ComboboxList>
              {(item) => (
                <ComboboxItem key={item} value={item}>
                  {item}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
      </div>
      {/* With groups. */}
      <div className="flex flex-wrap items-start gap-4">
        <Combobox items={timezones}>
          <ComboboxInput placeholder="Select a timezone" />
          <ComboboxContent>
            <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>
      </div>
      {/* With trigger button. */}
      <div className="flex flex-wrap items-start gap-4">
        <Combobox items={countries} defaultValue={countries[0]}>
          <ComboboxTrigger
            render={
              <Button
                variant="outline"
                className="w-64 justify-between font-normal"
              />
            }
          >
            <ComboboxValue />
          </ComboboxTrigger>
          <ComboboxContent>
            <ComboboxInput showTrigger={false} placeholder="Search" />
            <ComboboxEmpty>No items found.</ComboboxEmpty>
            <ComboboxList>
              {(item) => (
                <ComboboxItem key={item.code} value={item}>
                  {item.label}
                </ComboboxItem>
              )}
            </ComboboxList>