Data Entry

AutoComplete

An input field with a filterable suggestion dropdown. Supports keyboard navigation, custom filtering, and async data loading.

Installation

npx benflux-ui add auto-complete

Rich option objects

<AutoComplete
  options={[
    { value: "react", label: "React", description: "A JavaScript library for building UI" },
    { value: "vue", label: "Vue", description: "Progressive JavaScript Framework" },
    { value: "svelte", label: "Svelte", disabled: true },
  ]}
  placeholder="Select framework"
/>

Custom filter

// Filter only from the beginning of each option
<AutoComplete
  options={options}
  filterOption={(input, option) =>
    option.value.toLowerCase().startsWith(input.toLowerCase())
  }
/>

Async loading

"use client"
const [options, setOptions] = useState([])
const [loading, setLoading] = useState(false)

const handleSearch = async (text: string) => {
  setLoading(true)
  const results = await fetchSuggestions(text)
  setOptions(results)
  setLoading(false)
}

<AutoComplete
  options={options}
  onSearch={handleSearch}
  loading={loading}
  filterOption={false}  // disable client-side filter
/>

Props

Prop	Type	Default	Description
options*	AutoCompleteOption[] \| string[]	—	List of suggestions. Strings are converted automatically.
value	string	—	Controlled input value
defaultValue	string	""	Initial value (uncontrolled)
onChange	(value: string) => void	—	Called when the input value changes
onSelect	(value: string) => void	—	Called when the user selects an option
onSearch	(value: string) => void	—	Called on every keystroke. Use for async loading.
placeholder	string	"Search..."	Input placeholder
allowClear	boolean	false	Show a clear button when the input is not empty
filterOption	boolean \| ((input, option) => boolean)	true	Client-side filter function. Pass false to disable.
loading	boolean	false	Shows a loading indicator in the dropdown
disabled	boolean	false	Disables the input
notFoundContent	ReactNode	"No matches"	Shown when no options match the search