# MultiComboboxList (/docs/multi-combobox-list)
`MultiComboboxList` is [`MultiSelect`](/docs/multi-select)'s data contract without the trigger or the pills: a search box and a checkbox list that render **permanently open**, for embedding inside a container you already own the visibility of (a [`Popover`](/docs/popover), a [`Drawer`](/docs/drawer), a custom panel). Picking an option toggles its checkbox without closing the list — same idea as [`ComboboxList`](/docs/combobox-list), just for several values at once. It's what powers `DataTable`'s [multi-select column filter](/docs/data-table#column-filters).
```tsx
'use client';
import { MultiComboboxList } from '@42-central/ui-react/multi-combobox-list';
```
For a self-contained trigger with pills in the field, use [`MultiSelect`](/docs/multi-select) instead — same `data` / `value` / `onChange` contract. For the single-value equivalent see [`ComboboxList`](/docs/combobox-list).
The playground below renders the list bare, on the page — in real use it almost always sits inside something else that owns the open/close state (see `ComboboxList`'s [Popover example](/docs/combobox-list)).
## Playground [#playground]
## Checkboxes, not pills [#checkboxes-not-pills]
Every option shows a checkbox instead of a check mark; picking one adds it to the selection and keeps the list open so you can keep picking. `data` accepts the same shapes as `MultiSelect` — strings, objects, or groups.
## Hide picked options [#hide-picked-options]
With `hidePickedOptions`, chosen values drop out of the list so it only ever shows what's still addable.
## Max values [#max-values]
`maxValues` caps the selection — once reached, adding more is rejected (removals still work).
## Clearable [#clearable]
`clearable` adds a button that clears every value at once.
## Custom rendering [#custom-rendering]
`renderItem` owns each row's whole content — the same `(item, state) => ReactNode` renderer as [`Select`'s](/docs/select#custom-rendering), with `item` being `{ value, label, disabled }` and state `{ selected, highlighted }`. It fully replaces the default checkbox + label row, so if you still want a selected affordance, draw your own from `state.selected`.
## Label, description & error [#label-description--error]
Built in via [`Field`](/docs/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 [#controlled]
`value` is a `string[]`; `onChange` hands you the full selection on every add or remove.
```tsx
'use client';
import { useState } from 'react';
import { MultiComboboxList } from '@42-central/ui-react/multi-combobox-list';
export function ProjectList() {
const [value, setValue] = useState([]);
return (
);
}
```
## Forms [#forms]
A `name` renders one hidden input per selected value, so it wires into native `
```
## API [#api]
## Accessibility [#accessibility]
* Full combobox keyboard model from Ark: type to filter, `↑` / `↓` to move, `Enter` to toggle an option, `Esc` handled by the embedding container.
* `role="combobox"` on the search input with `aria-expanded="true"` (it is permanently open), `role="option"` with `aria-selected` on each row, `aria-multiselectable` on the list.
* 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. `Popover` already provides it).