Fluxo UIFluxo UIv0.4.1

AutocompleteMulti

A multi-select autocomplete component that allows users to select multiple items from suggestions.

Basic Usage

Basic Multi-Select Autocomplete

Select multiple items with autocomplete functionality

Preset Values

With Preset Values

Autocomplete with pre-selected values

Apple

Limited Selections

Limited Selections

Maximum 3 selections allowed

Disabled State

Disabled State

AutocompleteMulti in disabled state

AppleBanana

Usage

Basic Usage

import { AutocompleteMulti } from 'fluxo-ui';

const items = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
  { label: 'Date', value: 'date' },
];

function MyComponent() {
  const [value, setValue] = useState([]);

  return (
    <AutocompleteMulti
      items={items}
      value={value}
      placeholder="Select multiple items..."
      onChange={(e) => setValue(e.value)}
    />
  );
}

Advanced Usage

import { AutocompleteMulti } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState(['apple']);
  const [items, setItems] = useState([
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ]);

  const handleFilter = (query) => {
    const filtered = items.filter(item =>
      item.label.toLowerCase().includes(query.toLowerCase())
    );
    setItems(filtered);
  };

  return (
    <AutocompleteMulti
      items={items}
      value={value}
      placeholder="Max 3 selections..."
      maxSelectedItems={3}
      minLength={2}
      onChange={(e) => setValue(e.value)}
      onFilter={handleFilter}
      showCount
    />
  );
}

Import

import { AutocompleteMulti } from 'fluxo-ui';

Props

itemsreq
ListItem[]

Array of items to display in suggestions

value
T[]

Array of selected values

onChange
function

Callback fired when values change: (event: ComponentEvent<T[]>) => void

onFilter
function

Callback fired when filter input changes: (query: string) => void | Promise<void>

placeholder
string"Type to search and select..."

Placeholder text for the input field

disabled
booleanfalse

Whether the input is disabled

readonly
booleanfalse

Whether the input is readonly

required
booleanfalse

Whether the field is required

debounceMs
number300

Debounce delay in milliseconds for filter callback

minLength
number1

Minimum characters before showing suggestions

maxSelectedItems
number

Maximum number of items that can be selected

loading
booleanfalse

Whether data is loading

emptyMessage
string"No results found"

Message shown when no items match the filter

renderItem
function

Custom render function for each item: (item: ListItem, index: number, isSelected: boolean, isHighlighted: boolean) => React.ReactNode

renderSelectedTemplate
function

Custom render function for selected items: (selectedItems: ListItem[], onRemove: (value: T) => void) => React.ReactNode

showCount
booleanfalse

Show count of selected items when more than 3 are selected

autoFocus
booleanfalse

Auto-focus the input field on mount

id
string

ID for the input element

name
string

Name attribute for the hidden input field

args
any

Additional arguments passed to event callbacks

Features

Multi-Selection via Autocomplete

Type to filter and select multiple items that appear as removable tags inline with the input

Tag Display

Each selected item renders as a dismissible tag inside the input for a compact, clear selection view

Selection Limit

maxSelectedItems prevents selecting beyond the configured cap, locking the input automatically

Show Count Mode

When showCount is enabled, overflowing tags collapse into a numeric badge for cleaner display

Async Filtering

onFilter with built-in debounce supports server-side search and live data loading as the user types

Custom Item Renderer

renderItem and renderSelectedTemplate props allow fully custom suggestion and tag layouts

Accessibility

ARIA combobox and listbox roles with keyboard navigation, focus trapping, and screen reader announcements

Theming

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