# salla-filters-widget (https://docs.salla.dev/twilight/react/web-components/salla-filters-widget)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-filters">
  [`<salla-filters>`](https://docs.salla.dev/twilight/react/web-components/salla-filters) renders this component for you. You rarely use it directly.
</Callout>

One collapsible filter group of the product listing filters (for example brands, a variant, or the price range).
Used inside `salla-filters`, which renders one widget per filter option and handles its `changed` event; a theme
rarely places it directly.

What it renders depends on `option.type`: `values` gives checkboxes, `minimum` and `variants` give radio buttons,
and `range` gives a `salla-price-range`. A filter with the key `rating` shows stars. A search box appears when the
option has more than 5 values, and a show more link when it has more than 10 values (never for the `price` key).
Clicking the title collapses or expands the group.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-filters-widget>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaFiltersWidget } from '@salla.sa/twilight-components-react/filters-widget';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaFiltersWidget } from '@salla.sa/twilight-components-react/filters-widget';

export function Example() {
  return (
    <SallaFiltersWidget
      option={{ key: 'brand_id', label: 'Brands', type: 'values', values: [{ key: '1', value: 'Nike', count: 12 }] }}
      filtersData={{}}
      onChanged={e => console.log(e.detail.value)}
    />
  );
}
```

```ts
// `option` must be set before the element is added to the page
const widget = document.createElement('salla-filters-widget');
widget.option = { key: 'brand_id', label: 'Brands', type: 'values', values: [{ key: '1', value: 'Nike', count: 12 }] };
widget.filtersData = {};
widget.addEventListener('changed', e => console.log(e.detail.value));
document.body.appendChild(widget);
```

## Properties [#properties]

| Property       | Attribute        | Description                                                                                                                                                                                                                                                                                            | Type      | Default |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------- |
| `filtersData`  | `filters-data`   | The currently selected filters, used to check the matching inputs. Keyed by `option.key`: an array of values for `values` filters, a single value for `minimum` filters, `{ min, max }` for a `range` filter, and `variants[option.key]` for `variants` filters.                                       | `object`  |         |
| `option`       | `option`         | The filter to show: `{ key, label, type, values }`. `type` is one of `values`, `minimum`, `variants` or `range`. Each value is `{ key, value, count }` (the label is `value`, `count` is optional), or a plain number for the `rating` filter. Range filters use `{ from, to, count }` values instead. | `Filter`  |         |
| `withLoadMore` | `with-load-more` | Whether the show more link is displayed. The component sets this itself when it connects (and again after its first render), based on the number of values, so a value you pass is overwritten.                                                                                                        | `boolean` |         |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event     | Description                                                                                                                                                                                                                                                                                                                                                    | Detail |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| `changed` | Fires when the user selects or clears an option. For `values`, `minimum` and `variants` filters `event.detail` is `{ event, option, value }`, where `event` is the native input event, `option` is the filter and `value` is the option's key (or value). For range filters it is the detail of the `salla-price-range` event, with `value` as `{ min, max }`. | `any`  |

## Methods [#methods]

Call these on the element or a React ref.

### `reset() => Promise<void>` [#reset--promisevoid]

Clears the selection: unchecks every input inside the widget and resets the price range for `range` filters.
It does not emit `changed`. Resolves with no value.

### `setWidgetHeight(delay?: number) => Promise<void>` [#setwidgetheightdelay-number--promisevoid]

Sets the height of the widget content to its current content height, allowing for smooth transitions.
This function is often used in scenarios where the widget's content changes dynamically, and animating
the height adjustment is desired for a smoother user experience.

| Parameter | Type     | Description                                                                                            |
| --------- | -------- | ------------------------------------------------------------------------------------------------------ |
| `delay`   | `number` | Optional. The delay (in milliseconds) before updating the widget height. Defaults to 250 milliseconds. |

```ts
// Set widget height with the default delay (250 milliseconds)
await setWidgetHeight();

// Set widget height with a custom delay (e.g., 500 milliseconds)
await setWidgetHeight(500);
```

### `showMore() => Promise<void>` [#showmore--promisevoid]

Toggles between the short list (10 items) and the expanded list (15 items, scrollable beyond that).
Resolves with no value.

### `toggleWidget() => Promise<void>` [#togglewidget--promisevoid]

Expands or collapses the whole filter group, the same as clicking its title. Resolves with no value.

## Slots [#slots]

| Slot      | Description                                                                   |
| --------- | ----------------------------------------------------------------------------- |
| (default) | Extra content shown at the top of the values area, before the filter options. |

## Related [#related]

Renders: [`<salla-rating-stars>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-stars), [`<salla-price-range>`](https://docs.salla.dev/twilight/react/web-components/salla-price-range).

Used inside: [`<salla-filters>`](https://docs.salla.dev/twilight/react/web-components/salla-filters).