ComboboxList

ComboboxList is Select's data contract without the trigger: a search box and an option list that render permanently open, for embedding inside a container you already own the visibility of (a Popover, a Drawer, a custom panel) instead of owning its own floating dropdown. It's what powers DataTable's select column filter — click the filter icon once and you're already looking at a focused search box and list, no nested trigger to open.

'use client';
import { ComboboxList } from '@42-central/ui-react/combobox-list';

<ComboboxList data={['Paris', 'Lyon', 'Nice']} />

For a self-contained trigger + floating dropdown, use Select instead — same data / value / onChange contract, just with its own closed/open trigger button. For the multi-value equivalent see MultiComboboxList.

The playground below renders the list bare, on the page, so you can see it clearly — in real use it almost always sits inside something else that owns the open/close state:

'use client';
import { Popover } from '@42-central/ui-react/popover';
import { ComboboxList } from '@42-central/ui-react/combobox-list';

<Popover.Root>
  <Popover.Trigger>Filter</Popover.Trigger>
  <Popover.Content>
    <Popover.Body>
      <ComboboxList data={['Paris', 'Lyon', 'Nice']} />
    </Popover.Body>
  </Popover.Content>
</Popover.Root>

Playground

<Component placeholder="Search…" size="md" />

Data shapes

data accepts the same three shapes as Select — strings, { value, label?, disabled? } objects, or { group, items } groups:

Clearable

clearable adds a clear button beside the search icon once there's a value.

Custom rendering

renderItem works exactly like Select's — it receives the (value-narrowed) item, including any typed payload, and the live { selected, highlighted } state, and returns whatever the row should show.

Label, description & error

Built in via Field, like the rest of the family — though most of the time you'll omit them here, since the container embedding this (a filter popover, a drawer) usually carries its own label.

Controlled

onChange hands you the selected value, or null when cleared.

'use client';
import { useState } from 'react';
import { ComboboxList } from '@42-central/ui-react/combobox-list';

export function ProjectList() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <ComboboxList
      data={['Libft', 'ft_printf', 'Get Next Line']}
      value={value}
      onChange={setValue}
      clearable
    />
  );
}

Forms

A name renders a hidden input carrying the picked value, so it wires into native <form> submission and FormData — the search input itself is never named (it would submit the typed query, not the value).

<form action={save}>
  <ComboboxList name="project" data={['Libft', 'ft_printf', 'Get Next Line']} />
</form>

API

Accessibility

• Same combobox keyboard model as Select/Autocomplete: type to filter, ↑ / ↓ to move, Enter to pick, Home / End to jump to first / last.
• role="combobox" on the search input with aria-expanded="true" (it's permanently open), role="option" on each row, and the active-descendant wiring from Ark's Combobox machine.
• There's no trigger and no floating panel — accessibility for the open/close affordance (focus return, Esc handling, aria-haspopup) is the embedding container's job (e.g. Popoveralready provides it).

Changelog