Density

Combobox

Combobox composes Base UI’s combobox primitives with Density attributes on inputs, triggers, clear buttons, chips, chip removes, and items.

import { Combobox } from "density-base-ui";

const projects = ["Apollo", "Beacon", "Nimbus"];

export default function ComboboxExample() {
  return (
    <Combobox.Root items={projects} defaultValue="Beacon">
      <Combobox.InputGroup>
        <Combobox.Input aria-label="Project" placeholder="Find a project" />
        <Combobox.Trigger>Open</Combobox.Trigger>
      </Combobox.InputGroup>
      <Combobox.Portal>
        <Combobox.Positioner>
          <Combobox.Popup>
            <Combobox.List>
              {projects.map((project) => (
                <Combobox.Item key={project} value={project}>
                  <Combobox.ItemIndicator>Selected</Combobox.ItemIndicator>
                  {project}
                </Combobox.Item>
              ))}
            </Combobox.List>
          </Combobox.Popup>
        </Combobox.Positioner>
      </Combobox.Portal>
    </Combobox.Root>
  );
}

Props

Prop Attribute Values Default
Input parts density-presentation data-dn-presentation input input
Input parts density-emphasis data-dn-emphasis primary, secondary, outline, ghost primary
Input parts density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Button parts density-presentation data-dn-presentation button button
Button parts density-emphasis data-dn-emphasis primary, secondary, outline, ghost Varies
Button parts density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other Combobox parts Mixed Base UI combobox props None