ComboboxSides() — ui Function Reference

Architecture documentation for the ComboboxSides() function in combobox-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ComboboxSides() — ui Function Reference

Dependency Diagram

graph TD
  f05e40ee_9dd3_c3bd_b582_4b3b6b84abfb["ComboboxSides()"]
  08c943e1_cbb3_6c4d_0fd2_1693e54a1d0a["combobox-example.tsx"]
  f05e40ee_9dd3_c3bd_b582_4b3b6b84abfb -->|defined in| 08c943e1_cbb3_6c4d_0fd2_1693e54a1d0a
  style f05e40ee_9dd3_c3bd_b582_4b3b6b84abfb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/combobox-example.tsx lines 570–604

function ComboboxSides() {
  return (
    <Example title="Sides" containerClassName="col-span-2">
      <div className="flex flex-wrap justify-center gap-2">
        {(
          [
            "inline-start",
            "left",
            "top",
            "bottom",
            "right",
            "inline-end",
          ] as const
        ).map((side) => (
          <Combobox key={side} items={frameworks}>
            <ComboboxInput
              placeholder={side.replace("-", " ")}
              className="w-32 **:data-[slot=input-group-control]:capitalize"
            />
            <ComboboxContent side={side}>
              <ComboboxEmpty>No items found.</ComboboxEmpty>
              <ComboboxList>
                {(item) => (
                  <ComboboxItem key={item} value={item}>
                    {item}
                  </ComboboxItem>
                )}
              </ComboboxList>
            </ComboboxContent>
          </Combobox>
        ))}
      </div>
    </Example>
  )
}