Autocomplete

Autocomplete is a text input with a suggestion dropdown. Unlike Select, the value is the string the user types — data are just suggestions, and the user is free to type something that isn't in the list. It's built on the Combobox engine.

import { Autocomplete } from '@42-central/ui-react/autocomplete';

<Autocomplete data={['Libft', 'ft_printf', 'Get Next Line']} placeholder="Type a project…" />

Playground

<Component
  placeholder="Type a project…"
  clearSectionMode="replace"
  size="md"
/>

Filtering

Suggestions filter as you type. Once the query exactly matches a suggestion (for example right after you pick one), the full list shows again instead of collapsing to that single match — so the dropdown stays useful when you reopen it.

data accepts the same shapes as Select — strings, { value, label?, disabled? }, or grouped { group, items }.

Value is the text

onChange fires with the input string on every change — typing or picking a suggestion. There's no separate "selected option"; the value is the text.

'use client';
import { useState } from 'react';
import { Autocomplete } from '@42-central/ui-react/autocomplete';

export function CityField() {
  const [value, setValue] = useState('');
  return (
    <Autocomplete
      data={['Paris', 'Lyon', 'Marseille', 'Lille']}
      value={value}
      onChange={setValue}
      placeholder="Your city"
      clearable
    />
  );
}

Clearable

With clearable, a clear button appears once there's text.

Start & end slots

startSlot and endSlot place content at the field's inline-start / inline-end with the same slot layout as Input. endSlot renders before the built-in clear button and chevron.

import { Search } from 'lucide-react';

<Autocomplete
  data={['Paris', 'Lyon', 'Marseille']}
  startSlot={<Search />}
  placeholder="Your city"
/>

Custom rendering

renderItem owns each suggestion's content — the same (item, state) => ReactNode renderer as Select, with item being { value, label, disabled } and state { selected, highlighted }. The field still shows the typed text; only the suggestion rows change. Define the function in a "use client" module so it survives the server → client boundary.

Typed payload

Attach arbitrary data to a suggestion via payload and read it back as item.payload in renderItem — inferred from data, and undefined for bare-string or payload-less items.

'use client';
import { Badge } from '@42-central/ui-react/badge';

const projects = [
  { value: 'Libft', payload: { xp: 420 } },
  { value: 'Webserv', payload: { xp: 1340 } },
];

// item.payload is inferred as { xp: number } | undefined
const renderSuggestion = (item) => (
  <span className="flex flex-1 items-center justify-between gap-2">
    {item.label}
    {item.payload && <Badge>{item.payload.xp} XP</Badge>}
  </span>
);

<Autocomplete data={projects} renderItem={renderSuggestion} />

Label, description & error

Like the rest of the family, label / description / error / required are built in via Field:

<Autocomplete
  label="Project"
  description="Pick one or type your own"
  data={['Libft', 'ft_printf', 'Get Next Line']}
/>

API

Accessibility

• Full combobox keyboard model from Ark: type to filter, ↑ / ↓ to move, Enter to accept a suggestion, Esc to close.
• role="combobox" / listbox / option and aria-activedescendant / aria-expanded are handled by the Ark machine; label / description / error are associated via the built-in Field.
• Because typed text is always valid (allowCustomValue), the field never traps the user — they can submit whatever they enter.
• RTL is honored via the document dir.

Changelog