<Filter.Chips
definitions={definitions}
values={values}
onValuesChange={setValues}
labels={defaultFilterLabels}
locale="en-US"
/>;API
| Prop | Type | Default | |
|---|---|---|---|
definitions | readonly FilterDefinition[] | required | The same array the editor reads. A chip needs its definition to render a label, so a value with no matching definition is skipped. |
labels | FilterLabels | required | Every string the chips show. Filter.Root supplies it; standalone, pass
defaultFilterLabels or your own. |
locale | string | required | BCP 47 tag used to format the numbers, money and dates inside the chips. |
onValuesChange | (values: Readonly<Record<string, FilterValue>>) => void | required | Called with the record minus the removed filter, as the chip is dismissed. |
values | Readonly<Record<string, FilterValue>> | required | The applied filters. One chip per key present. |
onChipClick | ((key: string) => void) | — | Opens the editor, usually scrolled to the clicked filter. |
Plus every <div> prop. Source: filter/components/filter-chips.tsx.
The chips are the read half of the pair: without them a filtered list looks like
a short list. They render one chip per key in values, skipping any value whose
definition is missing from definitions, so a stale query string cannot produce
an unlabelled chip. onChipClick is what makes a chip a way back into the
editor rather than only a way out of a filter.