# ComboboxList (/docs/combobox-list) `ComboboxList` is [`Select`](/docs/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`](/docs/popover), a [`Drawer`](/docs/drawer), a custom panel) instead of owning its own floating dropdown. It's what powers `DataTable`'s [select column filter](/docs/data-table#column-filters) — click the filter icon once and you're already looking at a focused search box and list, no nested trigger to open. ```tsx 'use client'; import { ComboboxList } from '@42-central/ui-react/combobox-list'; ``` For a self-contained trigger + floating dropdown, use [`Select`](/docs/select) instead — same `data` / `value` / `onChange` contract, just with its own closed/open trigger button. For the multi-value equivalent see [`MultiComboboxList`](/docs/multi-combobox-list). 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: ```tsx 'use client'; import { Popover } from '@42-central/ui-react/popover'; import { ComboboxList } from '@42-central/ui-react/combobox-list'; Filter ``` ## Playground [#playground] ## Data shapes [#data-shapes] `data` accepts the same three shapes as `Select` — strings, `{ value, label?, disabled? }` objects, or `{ group, items }` groups: ## Clearable [#clearable] `clearable` adds a clear button beside the search icon once there's a value. ## Custom rendering [#custom-rendering] `renderItem` works exactly like [`Select`'s](/docs/select#custom-rendering) — 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 [#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] `onChange` hands you the selected value, or `null` when cleared. ```tsx 'use client'; import { useState } from 'react'; import { ComboboxList } from '@42-central/ui-react/combobox-list'; export function ProjectList() { const [value, setValue] = useState(null); return ( ); } ``` ## Forms [#forms] A `name` renders a hidden input carrying the picked value, so it wires into native `