> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Attribute filter

> Configure AttributeFilter with a filter definition or placeholder, handle selection changes, choose selection behavior, and replace its UI components.

API reference: [AttributeFilter()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilter/index.md) (function), [IAttributeFilterProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterprops/index.md) (interface)

[`AttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilter/index.md) is a dropdown that lists the values of an attribute and lets users pick the ones to filter by.

![AttributeFilter dropdown open with a searchable list of attribute values and Apply and Cancel buttons](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_new.png)

You can connect the component in one of two ways:

- Pass a `filter` and an `onApply` callback. The callback receives the updated filter when a user clicks **Apply**.
- Pass a [visualization definition placeholder](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/data-model/visualization-placeholders/index.md) in `connectToPlaceholder`. The component reads and writes the placeholder value itself, so `onApply` is optional.

> **Identify elements by value:**
> GoodData Cloud and GoodData.CN identify attribute elements by their primary key, which equals the element title. Pass element values, for example `newPositiveAttributeFilter(Md.Product.Name, ["Product A"])`. The `{ uris: [...] }` form is a legacy form: these backends treat its items as primary key values too.

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#structure)

```tsx
import "@gooddata/sdk-ui-filters/styles/css/main.css";
import { AttributeFilter } from "@gooddata/sdk-ui-filters";

<AttributeFilter
    filter={<attribute-filter>}
    onApply={<on-apply-callback>}
    selectionMode={<"multi" | "single">}
    parentFilters={<parent-filters>}
    parentFilterOverAttribute={<connecting-attribute>}
/>;
```

## [Example](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#example)

The filter starts with nothing excluded. When a user clicks **Apply**, `onApply` receives the new filter definition, which you can pass to the `filters` prop of a chart.

```tsx
import { useState } from "react";
import { AttributeFilter } from "@gooddata/sdk-ui-filters";
import { newNegativeAttributeFilter } from "@gooddata/sdk-model";

import "@gooddata/sdk-ui-filters/styles/css/main.css";

import * as Md from "./catalog.js";

const defaultFilter = newNegativeAttributeFilter(Md.EmployeeName.Default, []);

export const AttributeFilterExample = () => {
    const [filter, setFilter] = useState(defaultFilter);

    return (
        <AttributeFilter
            filter={filter}
            onApply={(updatedFilter) => {
                console.log("Applying updated filter:", updatedFilter);
                setFilter(updatedFilter);
            }}
        />
    );
};
```

## [AttributeFilter vs. AttributeFilterButton](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#attributefilter-vs-attributefilterbutton)

[`AttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilter/index.md) works the same way as [`AttributeFilterButton`](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter-button/index.md). The two differ only in the look of the dropdown button.

![AttributeFilter dropdown button showing only the attribute name, Employee Name](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_new_top_visual.png)

## [Default selection](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#default-selection)

To select values by default, include them in the `filter` prop.

```tsx
<AttributeFilter
    filter={newPositiveAttributeFilter(Md.EmployeeName.Default, ["Abbie Adams"])}
    onApply={setFilter}
/>
```

## [Hidden and static elements](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#hidden-and-static-elements)

- `hiddenElements` removes elements from the list and from the resulting filter. Give the items in the same form as the filter elements: values for a value-based filter. Make sure your input filter is consistent with them: a positive filter must not contain any hidden element, and a negative filter must contain all of them.
- `staticElements` shows a fixed list of elements instead of loading them from the backend.

## [Parent-child relationships between filters](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#parent-child-relationships-between-filters)

To make one attribute filter depend on another, pass `parentFilters` and `parentFilterOverAttribute` to the child filter.

`parentFilterOverAttribute` defines how the parent and child filters are connected. Reference an attribute of the parent filter, or an attribute that both filters share.

The parent filter can be an attribute filter definition or a visualization definition placeholder.

```tsx
<div>
    <AttributeFilter filter={parentFilter} onApply={setParentFilter} />
    <AttributeFilter
        filter={filter}
        parentFilters={parentFilter ? [parentFilter] : []}
        parentFilterOverAttribute={idRef("attr.restaurantlocation.locationid")}
        onApply={setFilter}
    />
</div>
```

```tsx
<div>
    <AttributeFilter connectToPlaceholder={parentFilterPlaceholder} />
    <AttributeFilter
        connectToPlaceholder={filterPlaceholder}
        parentFilters={parentFilterPlaceholder ? [parentFilterPlaceholder] : []}
        parentFilterOverAttribute={idRef("attr.restaurantlocation.locationid")}
    />
</div>
```

### [Dependent date filters](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#dependent-date-filters)

You can make an attribute filter depend on date filters (beta). The attribute filter then shows only the elements that are relevant for the specified date range. The `dependentDateFilters` prop takes dashboard date filters ([`IDashboardDateFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboarddatefilter/index.md)), not the [`IDateFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idatefilter/index.md) objects you pass to visualizations.

```tsx
import { AttributeFilter } from "@gooddata/sdk-ui-filters";
import { idRef, type IDashboardDateFilter } from "@gooddata/sdk-model";

// Last 6 months including the current one
const dateFilter: IDashboardDateFilter = {
    dateFilter: {
        type: "relative",
        granularity: "GDC.time.month",
        from: -5,
        to: 0,
        dataSet: idRef("date.dataset", "dataSet"),
    },
};

<AttributeFilter filter={filter} dependentDateFilters={[dateFilter]} onApply={setFilter} />;
```

## [Single value selection](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#single-value-selection)

To let users select only one value at a time, set `selectionMode` to `"single"`.

```tsx
import { useState } from "react";
import { AttributeFilter } from "@gooddata/sdk-ui-filters";
import { newPositiveAttributeFilter } from "@gooddata/sdk-model";

import "@gooddata/sdk-ui-filters/styles/css/main.css";
import * as Md from "./catalog.js";

// Single selection filter must be a positive filter with at most one element
const singleValueFilter = newPositiveAttributeFilter(Md.Product.Name, ["Product A"]);

export const SingleSelectionAttributeFilterExample = () => {
    const [filter, setFilter] = useState(singleValueFilter);

    return (
        <AttributeFilter
            filter={filter}
            selectionMode="single"
            onApply={(updatedFilter) => {
                console.log("Applying updated single-value filter:", updatedFilter);
                setFilter(updatedFilter);
            }}
        />
    );
};
```

In single selection mode:

- The filter must be a positive filter with at most one selected element.
- If you use parent filters, the backend must support single-select dependent filters (the `supportsSingleSelectDependentFilters` capability).
- The component uses UI parts built for selecting one value.

### [Automatic first item selection](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#automatic-first-item-selection)

To select the first available item when the filter is empty, set `selectFirst` to `true`. This works only in single selection mode.

```tsx
<AttributeFilter
    filter={newPositiveAttributeFilter(Md.Product.Name, [])}
    selectionMode="single"
    selectFirst={true}
    onApply={setFilter}
/>
```

## [Filter the list by measures, facts, or attributes](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#filter-the-list-by-measures-facts-or-attributes)

To list only the elements that are compatible with specific measures, facts, or attributes, pass their object references ([`ObjRef`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.objref/index.md)) in `validateElementsBy`.

```tsx
import { useState } from "react";
import { AttributeFilter } from "@gooddata/sdk-ui-filters";
import { attributeDisplayFormRef, idRef, newNegativeAttributeFilter } from "@gooddata/sdk-model";

import "@gooddata/sdk-ui-filters/styles/css/main.css";
import * as Md from "./catalog.js";

const defaultFilter = newNegativeAttributeFilter(Md.Product.Name, []);

export const ValidatedAttributeFilterExample = () => {
    const [filter, setFilter] = useState(defaultFilter);

    return (
        <AttributeFilter
            filter={filter}
            validateElementsBy={[
                idRef("total_sales", "measure"), // Validate by measure
                idRef("fact.sales.amount", "fact"), // Validate by fact
                attributeDisplayFormRef(Md.Product.Category), // Validate by attribute label
            ]}
            onApply={setFilter}
        />
    );
};
```

`validateElementsBy` accepts references to:

- **Measures:** only elements that have data for these measures are listed.
- **Facts:** only elements connected to these facts are listed.
- **Attributes and labels:** only elements related to these attributes are listed.

For example, list only the territories that have sales for a product, or only the product categories that have revenue and orders:

```tsx
<AttributeFilter
    filter={categoryFilter}
    validateElementsBy={[idRef("revenue", "measure"), idRef("order_count", "measure")]}
    onApply={setCategoryFilter}
/>
```

> **Backend support:**
> Element validation needs the `supportsAttributeFilterElementsLimiting` backend capability. Backends without it ignore `validateElementsBy`.

## [Customizing AttributeFilter components](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#customizing-attributefilter-components)

> **Beta:**
> [`AttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilter/index.md) component customizations are in beta.

To change the look of [`AttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilter/index.md), pass your own components for specific parts of it.

```tsx
<AttributeFilter
    filter={newNegativeAttributeFilter(Md.EmployeeName.Default, [])}
    onApply={setFilter}
    // Your own component for the "Apply" and "Cancel" buttons
    DropdownActionsComponent={CustomActions}
    // Your own component for each attribute element
    ElementsSelectItemComponent={CustomItem}
/>
```

If the props passed to a custom component aren't enough, call the `useAttributeFilterContext` hook inside it to read the full internal state of the filter.

```tsx
const { attribute } = useAttributeFilterContext();
```

Use customizations for small changes to the [`AttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilter/index.md) UI. For a UI that differs a lot, build your own with the [`useAttributeFilterController`](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/use-attribute-filter-controller/index.md) hook.

### [Customizable parts](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#customizable-parts)

Each `*Component` prop replaces one part of the filter. [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.errorcomponent/index.md) renders when the filter fails to initialize, and [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.loadingcomponent/index.md) renders while it initializes. The other parts:

- `DropdownButtonComponent`: the dropdown button.
  ![Dropdown button of the attribute filter](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_dropdown_button.png)

- `DropdownBodyComponent`: the dropdown body.
  ![Dropdown body with the search bar, the element list, and the action buttons](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_dropdown_body.png)

- `DropdownActionsComponent`: the Apply and Cancel buttons.
  ![Apply and Cancel buttons at the bottom of the dropdown](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_dropdown_actions.png)

- `ElementsSearchBarComponent`: the search bar.
  ![Search bar above the element list](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_elements_search_bar.png)

- `ElementsSelectComponent`: the element list.
  ![List of attribute elements with checkboxes](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_elements_select.png)

- `ElementsSelectLoadingComponent`: the element list while it loads.
  ![Loading indicator in place of the element list](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_elements_select_loading.png)

- `ElementsSelectItemComponent`: one element in the list.
  ![A single attribute element row with a checkbox](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_elements_select_item.png)

- `ElementsSelectActionsComponent`: the select all control above the list.
  ![Checked All checkbox with the element count](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_elements_select_actions.png)

- `ElementsSelectErrorComponent`: the error shown when elements fail to load.
  ![Error loading list items message in place of the element list](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_elements_select_error.png)

- `EmptyResultComponent`: the message shown when no element matches.
  ![No results match message in the dropdown](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_empty_result.png)

- `StatusBarComponent`: the status bar that summarizes the selection.
  ![Status bar reading is All except followed by the excluded values](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_status_bar.png)

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`titleWithSelection`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterprops/index.md#iattributefilterpropstitlewithselection) | `boolean` | No | — | — |
| [`alignPoints`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsalignpoints) | `IAlignPoint[]` | No | Specifies the align points for the attribute filter dropdown body. In other words where the dropdown body should be placed. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Specify an instance of analytical backend instance to work with. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`connectToPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsconnecttoplaceholder) | [`IPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iplaceholder/index.md)`<`[`IAttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iattributefilter/index.md)`>` | No | Specify @gooddata/sdk-ui#IPlaceholder to use to get and set the value of the attribute filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`customIcon`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropscustomicon) | [`IFilterButtonCustomIcon`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.ifilterbuttoncustomicon/index.md) | No | _(Alpha)_ Represents a custom icon along with a tooltip. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`dependentDateFilters`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsdependentdatefilters) | [`IDashboardDateFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboarddatefilter/index.md)`[]` | No | _(Beta)_ Specifies a dependent date filter that will be used to reduce options for for current attribute filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`disabled`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsdisabled) | `boolean` | No | _(Alpha)_ Specifies the visibility mode of the filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`displayAsLabel`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsdisplayaslabel) | [`ObjRef`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.objref/index.md) | No | _(Alpha)_ Provide a attribute filter label used for representing elements in component. Used only for filter with elements selection. For text filters (arbitrary, match) it is not used. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`DropdownActionsComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsdropdownactionscomponent) | `ComponentType<`[`IAttributeFilterDropdownActionsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterdropdownactionsprops/index.md)`>` | No | _(Beta)_ Customize attribute filter dropdown actions component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`DropdownBodyComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsdropdownbodycomponent) | `ComponentType<`[`IAttributeFilterDropdownBodyProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterdropdownbodyprops/index.md)`>` | No | _(Beta)_ Customize attribute filter dropdown body component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`DropdownButtonComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsdropdownbuttoncomponent) | `ComponentType<`[`IAttributeFilterDropdownButtonProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterdropdownbuttonprops/index.md)`>` | No | _(Beta)_ Customize attribute filter dropdown button component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`ElementsSearchBarComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementssearchbarcomponent) | `ComponentType<`[`IAttributeFilterElementsSearchBarProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementssearchbarprops/index.md)`>` | No | _(Beta)_ Customize attribute filter search bar component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`ElementsSelectActionsComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectactionscomponent) | `ComponentType<`[`IAttributeFilterElementsActionsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsactionsprops/index.md)`>` | No | _(Beta)_ Customize attribute filter elements select action component (Select all checkbox) | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`ElementsSelectComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectcomponent) | `ComponentType<`[`IAttributeFilterElementsSelectProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselectprops/index.md)`>` | No | _(Beta)_ Customize attribute filter elements select component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`ElementsSelectErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselecterrorcomponent) | `ComponentType<`[`IAttributeFilterElementsSelectErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselecterrorprops/index.md)`>` | No | _(Beta)_ Customize attribute filter elements select error component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`ElementsSelectItemComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectitemcomponent) | `ComponentType<`[`IAttributeFilterElementsSelectItemProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselectitemprops/index.md)`>` | No | _(Beta)_ Customize attribute filter elements select item component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`ElementsSelectLoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectloadingcomponent) | `ComponentType<`[`IAttributeFilterElementsSelectLoadingProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselectloadingprops/index.md)`>` | No | _(Beta)_ Customize attribute filter elements select loading component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`EmptyResultComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsemptyresultcomponent) | `ComponentType<`[`IAttributeFilterEmptyResultProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilteremptyresultprops/index.md)`>` | No | _(Beta)_ Customize attribute filter empty result component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`enableImmediateAttributeFilterDisplayAsLabelMigration`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsenableimmediateattributefilterdisplayaslabelmigration) | `boolean` | No | Enables the migration of displayAsLabel to be immediately reported to the parent app. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropserrorcomponent) | `ComponentType<`[`IAttributeFilterErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltererrorprops/index.md)`>` | No | _(Beta)_ Customize attribute filter with a component to be rendered if initialization fails. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`filter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsfilter) | [`IAttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iattributefilter/index.md) | No | Specify an attribute filter that will be customized using this filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`FilterMenuComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsfiltermenucomponent) | `ComponentType<`[`IFilterMenuProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.ifiltermenuprops/index.md)`>` | No | _(Alpha)_ Customize filter mode menu component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`fullscreenOnMobile`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsfullscreenonmobile) | `boolean` | No | Customize, whether the filter should take the entire screen on mobile devices. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`hiddenElements`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropshiddenelements) | `string[]` | No | If specified, these will be excluded from the elements available for selection and will also be removed from the resulting filter. This effectively behaves as if those elements were not part of the underlying display form. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`hideTooltips`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropshidetooltips) | `boolean` | No | _(Alpha)_ When true, hides all help/info tooltip icons within the attribute filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsloadingcomponent) | `ComponentType<`[`IAttributeFilterLoadingProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterloadingprops/index.md)`>` | No | _(Beta)_ Customize attribute filter with a component to be rendered if attribute filter is loading. Note that this will be rendered only during the initialization of the attribute filter. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`locale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropslocale) | [`ILocale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.ilocale/index.md) | No | Locale to use for localization of appearing texts. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`menuConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsmenuconfig) | [`IAttributeFilterMenuConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltermenuconfig/index.md) | No | _(Alpha)_ Configuration for the attribute filter header menu. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`onApply`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsonapply) | [`OnApplyCallbackType`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.onapplycallbacktype/index.md) | No | Specify function which will be called when user clicks 'Apply' button on this filter. Note: this callback is typically not called when using Dashboard apply filters mode ALL_AT_ONCE because there is no apply button dispalyed in attribute filter component. See withoutApply prop. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`onChange`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsonchange) | [`OnChangeCallbackType`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.onchangecallbacktype/index.md) | No | Specify function which will be called when user changes filter working selection. This is the selection that is staged for application. Not applied yet. Covers all filter modes: elements, arbitrary, match. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`onError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsonerror) | `(error:` [`GoodDataSdkError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.gooddatasdkerror/index.md)`) => void` | No | Callback that will be triggered when error is thrown. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`onInitLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsoninitloadingchanged) | `(loading: boolean, attribute?:` [`IAttributeMetadataObject`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iattributemetadataobject/index.md)`) => void` | No | Callback that will be triggered when initialization loading state changes. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`onSelect`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsonselect) | [`OnSelectCallbackType`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.onselectcallbacktype/index.md) | No | _(Deprecated)_ Specify function which will be called when user changes filter working selection. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`overlayPositionType`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsoverlaypositiontype) | `OverlayPositionType` | No | Specifies the overlay position type for the attribute filter dropdown. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`parentFilterOverAttribute`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsparentfilteroverattribute) | [`ParentFilterOverAttributeType`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.parentfilteroverattributetype/index.md) | No | Specify the over attribute - an attribute the filter and its parent filter are connected through. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`parentFilters`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsparentfilters) | [`AttributeFiltersOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributefiltersorplaceholders/index.md) | No | Specifies a parent attribute filter that will be used to reduce options for current attribute filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`selectFirst`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsselectfirst) | `boolean` | No | Specify if first available element should be automatically selected for empty selection. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`selectionMode`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsselectionmode) | [`DashboardAttributeFilterSelectionMode`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.dashboardattributefilterselectionmode/index.md) | No | Customize, how many elements can be selected by filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`showHeader`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsshowheader) | `boolean` | No | _(Alpha)_ When true, always show the dropdown header with title and filter mode menu, even when there is only one available filter mode. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`staticElements`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsstaticelements) | [`IAttributeElement`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iattributeelement/index.md)`[]` | No | If specified, these elements will replace the elements that would be loaded from the server. Note that if using this, limiting measures and/or filters will not work: it is your responsibility to filter the static elements yourself. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`StatusBarComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsstatusbarcomponent) | `ComponentType<`[`IAttributeFilterStatusBarProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterstatusbarprops/index.md)`>` | No | _(Beta)_ Customize attribute filter status bar component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`TextFilterBodyComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropstextfilterbodycomponent) | `ComponentType<`[`ITextFilterBodyProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.itextfilterbodyprops/index.md)`>` | No | _(Alpha)_ Customize text filter body component. | [`IAttributeFilterCustomComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md) |
| [`title`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropstitle) | `string` | No | Specify title for the attribute filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`validateElementsBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsvalidateelementsby) | [`ObjRef`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.objref/index.md)`[]` | No | Specify the items that are used for elements availability validation (metrics or attributes, labels, or facts that the backend will use to build validation metrics from). Only the elements that are compatible with the provided elements will be shown in the filter. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`withoutApply`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropswithoutapply) | `boolean` | No | _(Alpha)_ This enables filter mode without apply button. If true, it is responsibility of a client, to apply filters when needed. Typically uses onChange callback to catch filter state. Note, onApply callback is not called when this is true. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`workingFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsworkingfilter) | [`IAttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iattributefilter/index.md) | No | _(Deprecated)_ _(Alpha)_ Specify a working attribute filter that will be shown. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md#iattributefiltercorepropsworkspace) | `string` | No | Specify workspace to work with. | [`IAttributeFilterCoreProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercoreprops/index.md) |