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

# Attribute filter button

> Configure AttributeFilterButton with a filter definition or placeholder, handle selected values, choose single or multiple selection, and replace its UI components.

API reference: [AttributeFilterButton()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterbutton/index.md) (function), [IAttributeFilterBaseProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterbaseprops/index.md) (interface)

[`AttributeFilterButton`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterbutton/index.md) is a dropdown that lists the values of an attribute. Its button shows the attribute name together with the current selection.

![AttributeFilterButton 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_button_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.EmployeeName.Default, ["Abbie Adams"])`. 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-button/#structure)

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

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

## [Example](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter-button/#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 { AttributeFilterButton } 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 AttributeFilterButtonExample = () => {
    const [filter, setFilter] = useState(defaultFilter);

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

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

[`AttributeFilterButton`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterbutton/index.md) works the same way as [`AttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/index.md). The differences:

- The button shows the attribute name and the current selection.
- `attributeFilterMode` sets the filter to `active`, `readonly`, or `hidden`.
- [`AttributeFilterButton`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterbutton/index.md) has no `disabled` prop. Use `attributeFilterMode="readonly"` instead.

![AttributeFilterButton dropdown button showing the attribute name, Employee Name, and the selection, All](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_button_new_top_visual.png)

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

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

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

## [Hidden and static elements](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter-button/#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-button/#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](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/data-model/visualization-placeholders/index.md).

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

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

### [Multiple parent filters](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter-button/#multiple-parent-filters)

```tsx
<AttributeFilterButton
    filter={childFilter}
    parentFilters={[parentFilter1, parentFilter2]}
    parentFilterOverAttribute={idRef("attr.common.connectionid")}
    onApply={setChildFilter}
/>
```

### [Connecting attribute per parent filter](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter-button/#connecting-attribute-per-parent-filter)

`parentFilterOverAttribute` can also be a function. It's called for every parent filter and returns the connecting attribute for it.

```tsx
<AttributeFilterButton
    filter={childFilter}
    parentFilters={[parentFilter]}
    parentFilterOverAttribute={(parentFilter) => {
        // Return different connection attributes based on parent filter
        if (isRegionFilter(parentFilter)) {
            return idRef("attr.region.id");
        }
        return idRef("attr.country.id");
    }}
    onApply={setChildFilter}
/>
```

### [Dependent date filters](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter-button/#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 { 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"),
    },
};

<AttributeFilterButton
    filter={attributeFilter}
    dependentDateFilters={[dateFilter]}
    onApply={setAttributeFilter}
/>;
```

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

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

```tsx
import { useState } from "react";
import { AttributeFilterButton } 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";

const singleValueFilter = newPositiveAttributeFilter(Md.Region.Default, []);

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

    return (
        <AttributeFilterButton
            filter={filter}
            selectionMode="single"
            selectFirst={true} // Automatically select first available element
            onApply={(updatedFilter) => {
                console.log("Single selection applied:", updatedFilter);
                setFilter(updatedFilter);
            }}
        />
    );
};
```

In single selection mode:

- The filter must be a positive filter with at most one selected element.
- The dropdown closes after a user selects a value.
- `selectFirst` selects the first available element when the filter is empty.

## [Filter the list by measures, facts, or attributes](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter-button/#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`. For example, list only products that have sales, or only regions with active customers.

```tsx
import { useState } from "react";
import { AttributeFilterButton } 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 ValidatedFilterExample = () => {
    const [filter, setFilter] = useState(defaultFilter);

    return (
        <AttributeFilterButton
            filter={filter}
            validateElementsBy={[
                idRef("revenue", "measure"), // Measure
                attributeDisplayFormRef(Md.Product.Category), // Attribute label
                idRef("fact.sales.amount", "fact"), // Fact
            ]}
            onApply={setFilter}
        />
    );
};
```

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

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

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

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

```tsx
<AttributeFilterButton
    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 [`AttributeFilterButton`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterbutton/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.

The `*Component` props and the parts of the UI they replace are the same as for [`AttributeFilter`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilter/index.md), see [Customizable parts](https://www.gooddata.ai/docs/gooddata-ui/latest/filters/attribute-filter/index.md#customizable-parts). Only the dropdown button looks different:

![Dropdown button of AttributeFilterButton with the attribute name and the selection](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/attribute_filter_button_dropdown_button.png)

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

[`AttributeFilterButton`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterbutton/index.md) takes the props below except `disabled`, plus `attributeFilterMode` ([`VisibilityMode`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.visibilitymode/index.md): `"active"`, `"readonly"`, or `"hidden"`).

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`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) |