Fluxo UIFluxo UIv0.4.1

Autocomplete

An input field with auto-completion functionality that shows suggestions as the user types.

Basic Usage

Basic Autocomplete

Simple autocomplete with a list of suggestions

Custom Configuration

Custom Configuration

Autocomplete with custom minLength and maxSuggestions

Disabled State

Disabled State

Autocomplete in disabled state

Usage

Basic Usage

import { Autocomplete } from 'fluxo-ui';

const items = ['Apple', 'Banana', 'Cherry', 'Date'].map(v => ({ label: v, value: v }));

function MyComponent() {
  const [value, setValue] = useState('');
  const [selectedValue, setSelectedValue] = useState(null);

  return (
    <Autocomplete
      items={items}
      value={value}
      selectedValue={selectedValue}
      placeholder="Type to search..."
      onChange={(e) => setValue(e.value)}
      onSelect={(e) => setSelectedValue(e.value)}
    />
  );
}

Advanced Usage

import { Autocomplete } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState('');
  const [selectedValue, setSelectedValue] = useState(null);
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  const allItems = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'].map(v => ({ label: v, value: v }));

  const handleFilter = async (query) => {
    setLoading(true);
    setTimeout(() => {
      const filtered = allItems.filter(item =>
        item.label.toLowerCase().includes(query.toLowerCase())
      );
      setItems(filtered);
      setLoading(false);
    }, 500);
  };

  return (
    <Autocomplete
      items={items}
      value={value}
      selectedValue={selectedValue}
      placeholder="Search fruits..."
      minLength={2}
      maxSuggestions={3}
      debounceMs={300}
      loading={loading}
      onChange={(e) => setValue(e.value)}
      onSelect={(e) => {
        setSelectedValue(e.value);
        console.log('Selected:', e.value);
      }}
      onFilter={handleFilter}
    />
  );
}

Import

import { Autocomplete } from 'fluxo-ui';

Props

itemsreq
ListItem[]

Array of suggestion items with { label: string, value: any } structure

value
string"''"

Current input value (controlled)

selectedValue
any

Currently selected item value

onChange
(event: ComponentEvent<string>) => void

Callback fired when input value changes. Receives event object with value, name, and args

onSelect
(event: ComponentEvent<any>) => void

Callback fired when a suggestion is selected. Receives the selected item value

onFilter
(query: string) => void | Promise<void>

Callback for filtering items or loading async data based on input

placeholder
string"'Type to search...'"

Placeholder text for the input

required
boolean"false"

Mark the input as required

readonly
boolean"false"

Make the input read-only

disabled
boolean"false"

Disable the input

minLength
number"1"

Minimum characters before showing suggestions

maxSuggestions
number

Maximum number of suggestions to display (filters the items list)

debounceMs
number"300"

Debounce delay in milliseconds before calling onFilter

loading
boolean"false"

Show loading indicator in the input

emptyMessage
string"'No results found'"

Message shown when no suggestions match

renderItem
(item: ListItem, index: number, isSelected: boolean, isHighlighted: boolean) => ReactNode

Custom renderer for suggestion items

autoFocus
boolean"false"

Auto focus the input on mount

id
string

HTML id attribute for the input

name
string

Name attribute for the input (used in forms)

args
any

Additional arguments passed to onChange/onSelect handlers

className
string

Additional CSS classes for the input

Features

Type-ahead Search

Shows matching suggestions as the user types with configurable minimum character threshold

Async Filtering

onFilter callback with built-in debounce supports server-side search and dynamic data loading

Suggestion Limit

Control the number of visible suggestions with maxSuggestions to keep the dropdown focused

Loading State

Built-in loading indicator shown while async suggestions are being fetched

Custom Item Renderer

renderItem prop allows fully custom suggestion item layouts including icons and metadata

Separate Select Callback

Distinct onChange (typed text) and onSelect (chosen item) callbacks for full control over state

Accessibility

ARIA combobox pattern with keyboard navigation, focus management, and screen reader support

Theming

Full dark/light and 5 brand themes supported via CSS variables with zero extra configuration