TkxAutocomplete

Type-ahead with filtering

City

Selected: (none)

import { TkxAutocomplete } from 'tekivex-ui';

<TkxAutocomplete
  label="City"
  options={[
    { value: 'tokyo', label: 'Tokyo' },
    { value: 'osaka', label: 'Osaka' },
    { value: 'kyoto', label: 'Kyoto' },
  ]}
  onChange={(value) => console.log(value)}
/>

Free-solo (accept arbitrary input)

freeSolo (accept any input)

Tag

Value: (none)

<TkxAutocomplete
  label="Tag"
  options={tagOptions}
  freeSolo
  onChange={(v) => /* may be one of options OR a typed string */}
/>

Without freeSolo, the input rejects values that don’t match an option.

Async loading

const [options, setOptions] = useState([]);
const [loading, setLoading] = useState(false);

<TkxAutocomplete
  label="Search users"
  options={options}
  isLoading={loading}
  onInputChange={async (q) => {
    if (q.length < 2) return;
    setLoading(true);
    const res = await fetch(`/api/users?q=${q}`).then(r => r.json());
    setOptions(res);
    setLoading(false);
  }}
/>

Custom filter

<TkxAutocomplete
  options={users}
  filterFn={(opt, query) => {
    // Match on label OR email
    const q = query.toLowerCase();
    return opt.label.toLowerCase().includes(q) || opt.email.includes(q);
  }}
/>

Accessibility — what’s automatic

• ARIA combobox + listbox pattern (WAI-ARIA 1.2)
• Input has role="combobox" with aria-expanded, aria-controls, aria-activedescendant
• Options have role="option" + aria-selected
• Keyboard: arrows navigate, Enter selects, Escape closes, Tab accepts current selection (free-solo only)
• The empty state message is localised via the active locale
• Loading state announces via aria-busy

Props

Prop	Type	Required	Description
options	AutocompleteOption[]	yes	{ value, label }.
value	string		Controlled value.
onChange	(value: string) => void		Selected option change.
onInputChange	(query: string) => void		Fires on every keystroke (use for async).
placeholder	string
label	string	yes	WCAG-required label.
isLoading	boolean		Show loading state.
emptyMessage	string		Localised by default.
filterFn	(opt, query) => boolean		Custom matcher.
freeSolo	boolean		Accept arbitrary text.

Source

src/components/TkxAutocomplete.tsx