Comboboxes

Searchable text input + filtered dropdown. React uses Headless UI v2; HEEx is presentational and wires filtering in the parent LiveView.

Preview

Assigned to

React preview

LiveView (HEEx)

alias DesignSystem.UI.Comboboxes

<Comboboxes.combobox
  id="assignees"
  label="Assigned to"
  placeholder="Search people..."
  options={[
    %{value: "1", label: "Leslie Alexander"},
    %{value: "2", label: "Tom Cook"}
  ]}
/>

React (JSX)

import { Combobox } from "../ui/index.mjs"

<Combobox label="Assigned to" items={people} value={selected} onChange={setSelected} />