Density

Combobox

Combobox composes Base UI’s combobox primitives with Density attributes on inputs, triggers, and items. Selected options render through ListItem active state instead of visible selected text.

Type to filter the project list.
import { useState } from "react";
import { Combobox } from "density-base-ui";

const projects = [
  { value: "Apollo", label: "Apollo" },
  { value: "Beacon", label: "Beacon" },
  { value: "Nimbus", label: "Nimbus" },
];

export default function ComboboxExample() {
  const [project, setProject] = useState(projects[1]);

  return (
    <Combobox
      items={projects}
      value={project}
      onValueChange={(nextProject) => {
        setProject(nextProject as (typeof projects)[number]);
      }}
      hint="Type to filter the project list."
      label="Project"
      placeholder="Find a project"
    />
  );
}

Props

Prop Attribute Values Default
items None { value, label, disabled? }[] Required
label, hint, emptyLabel, trigger None React node Varies
fieldOrientation None vertical, horizontal vertical
placeholder None string None
emphasis data-dn-emphasis primary, secondary, outline, ghost primary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
popupPresentation data-dn-presentation overlay overlay
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm

Label

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxLabelExample() {
  return <Combobox items={items} label="Field label" />;
}

Hint

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxHintExample() {
  return <Combobox items={items} label="Field label" hint="Choose one" />;
}

Field orientation

The field copy stacks above the input.
The field copy sits beside the input.
import { Combobox } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxFieldOrientationExample() {
  return (
    <ExampleStack>
      <Combobox
        items={items}
        label="Vertical field"
        hint="The field copy stacks above the input."
        fieldOrientation="vertical"
      />
      <Combobox
        items={items}
        label="Horizontal field"
        hint="The field copy sits beside the input."
        fieldOrientation="horizontal"
      />
    </ExampleStack>
  );
}

Placeholder

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxPlaceholderExample() {
  return <Combobox items={items} placeholder="Search" />;
}

Empty label

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxEmptyLabelExample() {
  return <Combobox items={items} emptyLabel="Nothing found" />;
}

Trigger

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

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxTriggerExample() {
  return <Combobox items={items} trigger="⌄" />;
}

Emphasis

import { Combobox } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxEmphasisExample() {
  return (
    <ExampleStack>
      <Combobox items={items} emphasis="primary" />
      <Combobox items={items} emphasis="secondary" />
      <Combobox items={items} emphasis="outline" />
      <Combobox items={items} emphasis="ghost" />
    </ExampleStack>
  );
}

Size

import { Combobox } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxSizeExample() {
  return (
    <ExampleStack>
      <Combobox items={items} size="2xs" />
      <Combobox items={items} size="xs" />
      <Combobox items={items} size="sm" />
      <Combobox items={items} size="md" />
      <Combobox items={items} size="lg" />
      <Combobox items={items} size="xl" />
      <Combobox items={items} size="2xl" />
      <Combobox items={items} size="3xl" />
    </ExampleStack>
  );
}

Padding

import { Combobox } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

const items = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" },
];

export default function ComboboxPaddingExample() {
  return (
    <ExampleStack>
      <Combobox items={items} padding="none" />
      <Combobox items={items} padding="2xs" />
      <Combobox items={items} padding="xs" />
      <Combobox items={items} padding="sm" />
      <Combobox items={items} padding="md" />
      <Combobox items={items} padding="lg" />
      <Combobox items={items} padding="xl" />
      <Combobox items={items} padding="2xl" />
      <Combobox items={items} padding="3xl" />
    </ExampleStack>
  );
}