Input Dropdown Selector

A hybrid component combining a text input with a dropdown list for selecting related entities inline. Useful for quick lookups without opening a separate modal.

Import


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

Props

Prop	Type	Description
`value`	`string`	Controlled text value
`onChange`	`(value: string) => void`	Change handler
`onSelect`	`(item: Entity) => void`	Called when an item is selected from dropdown
`optionsUrl`	`string`	API endpoint for dropdown items
`labelField`	`string`	Field to display in dropdown items
`placeholder`	`string`	Input placeholder
`disabled`	`boolean`	Disable the control
`minChars`	`number`	Min characters before dropdown opens (default: 2)

Usage


import { InputDropdownSelector } from "...";
 
<InputDropdownSelector
  value={searchText}
  onChange={setSearchText}
  onSelect={(item) => {
    setSelectedId(item.id);
    setSearchText(item.name);
  }}
  optionsUrl="/api/accounts"
  labelField="name"
  placeholder="Search accounts..."
/>

Difference from Combobox

Feature	InputDropdownSelector	Combobox
Freetext input	Yes	No
Multi-select	No	Yes
Async loading	Yes	Yes
Use case	Quick lookup + freetext	Pure select

Combobox — pure select with search
Render Form Fields
Input

Input Dropdown Selector

Import

Props

Usage

Difference from Combobox

Related