Combobox

A feature-rich dropdown component that supports search filtering, async data loading, and multi-select. Used internally by RenderFormFields for ColumnTypeEnum.SELECT and ColumnTypeEnum.MANY_TO_MANY fields.

Import


import { Combobox } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Combobox";

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: string }[]`	`[]`	Static options list
`value`	`string \| string[]`	—	Controlled value
`onChange`	`(value: string \| string[]) => void`	—	Change handler
`placeholder`	`string`	`"Select..."`	Placeholder text
`isMulti`	`boolean`	`false`	Enable multi-select
`isAsync`	`boolean`	`false`	Enable async loading
`loadOptions`	`(query: string) => Promise<Option[]>`	—	Async loader function
`disabled`	`boolean`	`false`	Disable the control
`className`	`string`	—	Additional CSS classes

Usage

Static


import { Combobox } from "...";
 
const statusOptions = [
  { value: "draft", label: "Draft" },
  { value: "pending", label: "Pending" },
  { value: "paid", label: "Paid" },
];
 
<Combobox
  options={statusOptions}
  value={status}
  onChange={setStatus}
  placeholder="Select status..."
/>

Async


import { Combobox } from "...";
 
const loadAccounts = async (query: string) => {
  const res = await fetch(`/api/accounts?search=${query}`);
  const data = await res.json();
  return data.map((item) => ({ value: String(item.id), label: item.name }));
};
 
<Combobox
  isAsync
  loadOptions={loadAccounts}
  value={accountId}
  onChange={setAccountId}
  placeholder="Search accounts..."
/>

Multi-Select


import { Combobox } from "...";
 
<Combobox
  isMulti
  options={tagOptions}
  value={selectedTags}      // string[]
  onChange={setSelectedTags}
  placeholder="Select tags..."
/>

In CRUD forms, RenderFormFields automatically renders Combobox for ColumnTypeEnum.SELECT (with isAsync) and ColumnTypeEnum.MANY_TO_MANY (with isMulti). You only need to use this directly for custom form layouts.

In CRUD Forms

When RenderFormFields renders a SELECT or MANY_TO_MANY field, the Combobox receives:

loadOptions — derived from the field’s optionsUrl or optionsArray
isMulti — true for MANY_TO_MANY relations
isAsync — true when optionsUrl is set

To use a static options array instead of an API call, set optionsArrayFinite in changes.json:


{
  "fields": {
    "status": {
      "optionsArrayFinite": "statusOptionsArray"
    }
  }
}

Select — simple static dropdown (no search)
Select Async — async without search
Render Form Fields
Form (RHF)