AutoComplete

pro

AutoComplete wraps an Input with a floating dropdown that filters a list of options as the user types.

Get the code

Installation

Add this component with the NateUI CLI.

npx nateui@latest add AutoComplete

Examples

Custom Render

Get the code

Controlled

Get the code

Size

Get the code

Disabled

Get the code

Async

Get the code

API

PropDescriptionTypeDefault
dataArray of options to filter and display.T[]—
optionKeyFunction that extracts the display string from an option. Used for filtering and setting the input value on selection.(obj: T) => string—
filterOptionsWhether to apply the built-in text filter before rendering data. Disable this when data is already filtered by a remote search.booleantrue
valueControlled input value.string—
onInputChangeCallback when the input text changes.(value: string) => void—
onOptionSelectedCallback when an option is selected (click or Enter).(option: T) => void—
renderOptionCustom render function for each dropdown item.(option: T) => ReactNode—
sizeInput size.'sm' | 'md' | 'lg''md'
disabledPrevents input and blocks the dropdown.booleanfalse
placeholderInput placeholder text.string—
prefixContent rendered before the input text.string | ReactNode—
suffixContent rendered after the input text.string | ReactNode—
invalidMarks the input as invalid (form integration).booleanfalse
classNameAdditional classes on the input element.string—

Types

type AutoCompleteProps<T> = Omit<InputProps, 'onChange'> & {
  data: Array<T>;
  optionKey: (obj: T) => string;
  filterOptions?: boolean;
  value: string;
  onInputChange: (value: string) => void;
  onOptionSelected: (option: T) => void;
  renderOption: (option: T) => ReactNode;
};