> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/pro-pack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/pro-pack/dataset-filter-labels/installation.md).

# Installation

The filer labels library is located in `wire-filter-label.js`.  This and other other related files can be installed from the NPM package registry at`@wirebootstrap/wire-filter-label`.

```javascript
npm install @wirebootstrap/wire-filter-label
```

## Class

The Dataset Filter Labels component extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all the base functionality of that class.

To create a new instance of the filter labels component, use the `wire.filterLabel`class.

```javascript
const label = new wire.filterLabel();
```

## Render

Render the component using an HTML `span` element.

{% tabs %}
{% tab title="JavaScript" %}

```html
<span id="label"></span>
<script>
    new wire.filterLabel().render("#label", {});
</script>
```

{% endtab %}

{% tab title="Web Components" %}

```html
<wire-filter-label wr-config=""></wire-filter-label>
```

{% endtab %}

{% tab title="React" %}

```html
<WireComponent component="wire.filterLabel" config={}>
    <span></span>
</WireComponent>
```

{% endtab %}

{% tab title="Vue" %}

```html
<span wire-component="wire.filterLabel" v-wire-config=""></span>
```

{% endtab %}

{% tab title="Angular" %}

```html
<span wire-component="wire.filterLabel" [config]=""></span >
```

{% endtab %}
{% endtabs %}