useChipList
useChipList measures a row of chips and decides which fit within maxRows and which fold into a +N count. It owns no markup. ChipList and Field.ChipInput are built on it; Field.ChipInput uses reserveWidth to hold room for its input.
Put listRef on the wrapping list and render the measure row into measureRef. Hide the list until measured, since the server always renders unmeasured.
When to use
When: Your own markup for chips capped at maxRows with a +N count, where ChipList does not fit. useChipList gives the visible/hidden split; the list, its clamp CSS and its focus handling are yours.
When not: Applied filters, read-only tags or recipients → ChipList. Typing new chips → Field.ChipInput (already built on the hook). Picking from options → Combobox recipe. Selectable or toggle chips → Checkbox / Button.Root. One chip → Chip.Root. Chip add/remove state → useChipField.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| chips | readonly string[] | yes | — | Chip labels, in order. visible is always a prefix. |
| maxRows | number | no | — | Fold chips that do not fit into +N. Unset shows every chip. |
| reserveWidth | RefObject<HTMLElement | null> | no | — | Element whose computed min-width stays free on the last line. A ref so density changes stay current. |