Inputs

Combobox

An editable input paired with a filtered list of selectable options.

ComboboxView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Issue type

tsx

import { Cell, For } from "retend";

import { Combobox, Field } from "innate-ui";
import classes from "../docs.module.css";
import { Icon } from "@/docs/icons/Icon";

type IssueType = "" | "bug" | "documentation" | "enhancement" | "help-wanted" | "good-first-issue";

const options = [
  ["bug", "bug"],
  ["documentation", "documentation"],
  ["enhancement", "enhancement"],
  ["help-wanted", "help wanted"],
  ["good-first-issue", "good first issue"],
] as const;

export function ComboboxDemo() {
  const selected = Cell.source<IssueType>("");

  return (
    <Field id="issue-field" class={classes.fullControl}>
      <Field.Label>Issue type</Field.Label>
      <Combobox
        id="issue-combobox"
        value={selected}
        onChange={(value) => selected.set(value)}
        placeholder="Select an issue..."
      >
        <Combobox.CaretIcon>
          <Icon name="chevronDown" data-slot-icon="combobox-caret" />
        </Combobox.CaretIcon>
        <Combobox.CheckIcon>
          <Icon name="check" data-slot-icon="combobox-check" />
        </Combobox.CheckIcon>
        {For(options, ([value, label]) => (
          <Combobox.Option value={value} textValue={label}>
            {label}
          </Combobox.Option>
        ))}
      </Combobox>
    </Field>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

ComboboxProps

Prop	Type	Default
`id`required Stable id used to connect the input and listbox.	`string`	`—`
`value`required Selected option value.	`JSX.ValueOrCell<Value>`	`—`
`children`required `Combobox.Option` children.	`JSX.Children`	`—`
`query` Current search query.	`JSX.ValueOrCell<string>`	`—`
`open` Whether the options popover is open.	`JSX.ValueOrCell<boolean>`	`—`
`placeholder` Input placeholder.	`JSX.ValueOrCell<string>`	`"Search options"`
`emptyText` Message shown when no options match.	`JSX.ValueOrCell<string>`	`"No options found"`
`disabled` Whether the combobox is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`invalid` Whether the combobox is in an invalid state.	`JSX.ValueOrCell<boolean>`	`false`
`ariaDescribedBy` Ids of elements that describe the combobox.	`JSX.ValueOrCell<string \| undefined>`	`—`
`showCaret` Whether to show the caret icon.	`JSX.ValueOrCell<boolean>`	`true`
`hideWhenEmpty` Hides the popup when filtering produces no options.	`JSX.ValueOrCell<boolean>`	`false`
`filter` Custom option filtering function.	`ComboboxFilter<Value>`	`—`
`onChange` Called when an option is selected.	`(value: Value) => void`	`—`
`onQueryChange` Called when the search query changes.	`(query: string) => void`	`—`
`onOpenChange` Called when the popover requests an open-state change.	`(open: boolean, reason?: PopoverCloseReason) => void`	`—`

Inspect the typed source →