Filter

Filter.Root

	Type	Description
`id`	`string`	(required) Unique identifier that links the filter UI to `Filter.useFilter(id)` consumers via shared state.
`behavior`	`"realtime"` `"manual"`	(optional) Controls when filter changes are emitted. `"realtime"` (default) emits on every change. `"manual"` buffers filter changes internally until the user clicks Apply in the panel. Search input is always emitted in real time.
`resultCount`	`number`	(optional) The number of matching results. Passed to child components that can display the count.
`defaultFilters`	`Record<string, FilterValue>`	(optional) Pre-selected filters to apply on mount. The panel and relevant filter accordions open automatically. Keys should match the filter key format (e.g. `/type/card`).
`defaultPanelOpen`	`boolean`	(optional) Controls whether the filter panel is open on mount. When `true`, the panel opens even without active filters. When `false`, the panel stays closed even with `defaultFilters` or URL-restored filters. Defaults to opening automatically when filters are present.
`resultLoading`	`boolean`	(optional) When `true`, the result count shows a skeleton loading state. Use this while fetching result counts asynchronously.
`className`	`string`	(optional) Custom CSS class name applied to the root element.
`style`	`CSSProperties`	(optional) Inline styles applied to the root element. Use e.g. `maxWidth` to control the width of the filter.
`children`	`React.ReactNode`	(optional) Filter sub-components like `Filter.Search`, `Filter.Panel`, `Filter.ActiveFilters`, etc.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.

Filter.Header

	Type	Description
`className`	`string`	(optional) Custom CSS class name.
`children`	`React.ReactNode`	(optional) Filter controls like `Filter.Toolbar`, `Filter.Panel`, and `Filter.ActiveFilters`.

Filter.Search

	Type	Description
`label`	`string`	(required) Label for the search input.
`submitBehavior`	`"manual"`	(optional) When set to `"manual"`, the search state is only updated when the user presses Enter or clicks the submit button. Automatically applies `type="search"` and explicitly shows the submit button.
`placeholder`	`string`	(optional) Placeholder text for the search input.
`className`	`string`	(optional) Custom CSS class name.

Filter.Panel

	Type	Description
`className`	`string`	(optional) Custom CSS class name.
`children`	`React.ReactNode`	(optional) Filter components rendered inside the panel, e.g. `Filter.Selection`, `Filter.Date`, or custom filters.

Filter.PanelButton

	Type	Description
`children`	`React.ReactNode`	(optional) Button label text. Defaults to the translated `"Filter"` label.
`[Button props]`	`Various`	(optional) All Button props are supported except `variant`, `icon`, `iconPosition`, `transitionState`, and `aria-expanded`.

Filter.ActiveFilters

	Type	Description
`label`	`string`	(optional) Accessible label for the active filters group. Defaults to `"Aktive filtre"`.
`showCategoryLabel`	`boolean`	(optional) When `true`, each tag is prefixed with the category name (e.g. "Betalingstype: Kort" instead of "Kort").
`collapsibleThreshold`	`number`	(optional) When the number of active filters exceeds this threshold, tags are shown inside a collapsible accordion with a scrollable area and a "Clear all" button.
`className`	`string`	(optional) Custom CSS class name.

Filter.Toolbar

	Type	Description
`className`	`string`	(optional) Custom CSS class name.
`children`	`React.ReactNode`	(optional) Toolbar content — typically `Filter.Search` on the left and `Filter.Toolbar.Actions` grouping action buttons on the right.

Filter.Toolbar.Actions

	Type	Description
`className`	`string`	(optional) Custom CSS class name.
`children`	`React.ReactNode`	(optional) Action buttons or controls to display on the right side of the toolbar.

Filter.Item

	Type	Description
`label`	`string`	(required) Label displayed for this filter section.
`filterKey`	`string`	(required) Unique key identifying this filter in the state.
`defaultOpen`	`boolean`	(optional) When `true`, the accordion starts expanded. The open/closed state is remembered across panel opens without a page refresh.
`className`	`string`	(optional) Custom CSS class name.
`children`	`React.ReactNode`	(optional) Filter content rendered inside the item.

Filter.Date

	Type	Description
`label`	`string`	(optional) Label for the date filter. Defaults to the locale translation (e.g. "Dato" in Norwegian, "Date" in English).
`filterKey`	`string`	(optional) Unique key for this filter in the state. Defaults to `"date"`.
`defaultOpen`	`boolean`	(optional) When `true`, the accordion starts expanded. The state is remembered across panel opens.

Filter.Selection

	Type	Description
`label`	`string`	(required) Label for the selection filter.
`filterKey`	`string`	(required) Unique key for this filter group. Individual selections are stored as `filterKey/value` entries in the filter state.
`data`	`Array<{ value: string; label: string }>`	(required) Array of selectable items. Each item has a `value` (string) and `label` (string).
`defaultOpen`	`boolean`	(optional) When `true`, the accordion starts expanded. The state is remembered across panel opens.

Filter.MultiSelection

	Type	Description
`label`	`string`	(required) Label for the multi-selection filter.
`filterKey`	`string`	(required) Unique key for this filter group. Individual selections are stored as `filterKey/value` entries in the filter state.
`data`	`Array<{ value: string \| number; title: React.ReactNode }>`	(required) Array of selectable items. Each item has a `value` (string \| number) and `title` (ReactNode).
`defaultOpen`	`boolean`	(optional) When `true`, the accordion starts expanded. The state is remembered across panel opens.

Filter.QuickFilters

	Type	Description
`className`	`string`	(optional) Custom CSS class name.
`children`	`React.ReactNode`	(optional) Quick filter toggle buttons or other controls.

Filter.SortButton

	Type	Description
`data`	`DrawerListData`	(required) Sort options passed to the underlying Dropdown. Each item should have a `selectedKey` and `content`.
`value`	`string` `number`	(optional) The currently selected sort value.
`defaultValue`	`string` `number`	(optional) Default sort value on mount.
`size`	`"default"` `"small"` `"medium"` `"large"`	(optional) Size of the trigger button. Defaults to `"medium"`.
`[Dropdown props]`	`Various`	(optional) All other Dropdown props are forwarded.

Filter.NoResults

	Type	Description
`connectedTo`	`string`	(optional) Links to a `Filter.Root` by its `id`. Reads `resultCount` from the shared filter state. When used, the `resultCount` prop is not needed.
`resultCount`	`number`	(optional) The number of results. When `0`, the no-results message is shown. When omitted, falls back to the `resultCount` from the linked `connectedTo` or the nearest `Filter.Root`.
`children`	`string`	(optional) Custom message to display instead of the default translated text.
`className`	`string`	(optional) Custom CSS class name.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.

Filter.ResultCount

	Type	Description
`connectedTo`	`string`	(optional) Links to a `Filter.Root` by its `id`. Reads `resultCount` from the shared filter state.
`resultCount`	`number`	(optional) The number of results to display. When omitted, falls back to the `resultCount` from the linked `connectedTo` or nearest `Filter.Root`.
`alwaysVisible`	`boolean`	(optional) When `true`, the result count is always visible even when no filters or search text are active. By default, the count is only shown when filters are active.
`children`	`string`	(optional) Custom message to display instead of the default translated text.
`className`	`string`	(optional) Custom CSS class name.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.

Filter.Content

	Type	Description
`connectedTo`	`string`	(optional) Links to a `Filter.Root` by its `id`. When omitted and used inside a `Filter.Root`, the id is inherited from context.
`className`	`string`	(optional) Custom CSS class name.
`children`	`React.ReactNode`	(optional) Result content to render. Wrapped in a skeleton when the linked filter is loading.
`Space`	`string` `object`	(optional) Spacing properties like `top` or `bottom` are supported.

Filter.Highlighting

	Type	Description
`children`	`string`	(required) Text to highlight based on the current search value.
`connectedTo`	`string`	(optional) Links to a `Filter.Root` by its `id`. When omitted, the id is inherited from the nearest `Filter.Root` or `Filter.Content`.

Filter.useFilter(id)

Returns an object with the following properties:

	Type	Description
`filters`	`Record<string, FilterValue>`	(required) Object containing all active filters keyed by filterKey.
`search`	`string`	(required) The current search string.
`hasActiveFilters`	`boolean`	(required) `true` when any filter or search text is active.
`resetFilters`	`() => void`	(required) Clears all filters and search text.
`removeFilter`	`(filterKey: string) => void`	(required) Removes a single filter by its filterKey.

Filter.useFilterAsync(id, fetcher, options?)

Parameters:

	Type	Description
`id`	`string`	(required) The `id` of the `Filter.Root` to link to.
`fetcher`	`(params: { filters, search }) => Promise<T>`	(required) Async function called whenever filters or search change. Receives `{ filters, search }` and should return the filtered data.
`options.initialData`	`T`	(optional) Data to return before the first fetch completes.
`options.debounce`	`number`	(optional) Delay in milliseconds before executing the fetcher after a state change. Useful for reducing API calls while the user is typing.

Returns an object with:

	Type	Description
`data`	`T` `undefined`	(required) The data returned by the fetcher. `undefined` until the first fetch completes (unless `initialData` is provided).
`loading`	`boolean`	(required) `true` while a fetch is in progress.
`error`	`Error` `undefined`	(required) The error thrown by the fetcher, if any. Reset to `undefined` on each new fetch.

Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Key	nb-NO	en-GB	sv-SE	da-DK
`Filter.ariaLabel`	Filter	Filter	Filter	Filter
`Filter.activeFiltersLabel`	Aktive filtre	Active filters	Aktiva filter	Aktive filtre
`Filter.activeFiltersCountLabel`	%s aktive filtre	%s active filters	%s aktiva filter	%s aktive filtre
`Filter.clearAllLabel`	Fjern alle	Clear all	Rensa alla	Fjern alle
`Filter.panelButtonLabel`	Filter	Filter	Filter	Filter
`Filter.hideFilterLabel`	Skjul filter	Hide filter	Dölj filter	Skjul filter
`Filter.applyFilterLabel`	Bruk filter	Apply filter	Använd filter	Anvend filter
`Filter.cancelFilterLabel`	Avbryt	Cancel	Avbryt	Annuller
`Filter.dateLabel`	Dato	Date	Datum	Dato
`Filter.sortButtonLabel`	Sorter	Sort	Sortera	Sortér
`Filter.noResultsMessage`	Prøv å endre eller fjerne noen filtre.	Try changing or removing some filters.	Försök att ändra eller ta bort några filter.	Prøv at ændre eller fjerne nogle filtre.
`Filter.resultCountMessage`	%s treff	%s result(s)	%s resultat	%s resultat(er)