> For the complete documentation index, see [llms.txt](https://help.iviva.com/uxp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.iviva.com/uxp/v1.0.0/components/filterpanel.md).

# FilterPanel

Displays a filter button which, when clicked, opens a popup panel. Suitable for hiding filters for widgets or searches

## Installation

```tsx
import {FilterPanel} from 'uxp/components';
```

## Examples

```tsx
<FilterPanel
                               enableClear={inputValue?.length > 0 || selected != null}
                               onClear={() => { setInputValue(""); setSelected(null) }} >
                               <FormField className="no-padding mb-only">
                                   <Label>Sort By</Label>
                                   <Select
                                       selected={selected}
                                       options={[
                                           { label: "Name", value: "op-1" },
                                           { label: "Date", value: "op-2" },
                                       ]}
                                       onChange={(value) => { setSelected(value) }}
                                       placeholder=" -- select --"
                                       isValid={selected ? selected?.length > 0 : null}
                                   />
                               </FormField>
</FilterPanel>
```

## Properties

| Name          | Type                                        | Description                                                                                                                  |
| ------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| onOpen        | [ICallback](/uxp/v1.0.0/types/icallback.md) | Called whenever the panel is opened                                                                                          |
| onClose       | [ICallback](/uxp/v1.0.0/types/icallback.md) | Called whenever the panel gets dismissed                                                                                     |
| onClear       | [ICallback](/uxp/v1.0.0/types/icallback.md) | Called whenever the clear button on the panel is pressed. This button is available only when `enableClear` is set to `true1` |
| fillContainer | React.RefObject                             |                                                                                                                              |
| className     | string                                      | Any extra css classes to add to the filter panel                                                                             |
| enableClear   | boolean                                     | Enabled the clear button on the panel                                                                                        |

### onOpen

***

Called whenever the panel is opened

| type                                        |
| ------------------------------------------- |
| [ICallback](/uxp/v1.0.0/types/icallback.md) |

### onClose

***

Called whenever the panel gets dismissed

| type                                        |
| ------------------------------------------- |
| [ICallback](/uxp/v1.0.0/types/icallback.md) |

### onClear

***

Called whenever the clear button on the panel is pressed. This button is available only when `enableClear` is set to `true1`

| type                                        |
| ------------------------------------------- |
| [ICallback](/uxp/v1.0.0/types/icallback.md) |

### fillContainer

***

| type            |
| --------------- |
| React.RefObject |

### className

***

Any extra css classes to add to the filter panel

| type   |
| ------ |
| string |

### enableClear

***

Enabled the clear button on the panel

| type    |
| ------- |
| boolean |