Filter

Builds and displays a set of structured filters.

Filter web component

Builds and displays a set of structured filters.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Status filter

Offer a predefined status filter.

Active

Paused

<noora-filter>
  <noora-filter-definition name="status" label="Status" type="option">
    <noora-filter-option value="active">Active</noora-filter-option>
    <noora-filter-option value="paused">Paused</noora-filter-option>
  </noora-filter-definition>
  <noora-filter-definition name="name" label="Name" type="text"></noora-filter-definition>
  <noora-filter-definition name="amount" label="Amount" type="number"></noora-filter-definition>
  <noora-filter-value name="status" operator="==" value="active"></noora-filter-value>
</noora-filter>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`"Filter"`	Sets the add-filter label.
`disabled`	boolean	`false`	Disables editing.

Properties

Property	Type or allowed values	Default	Description
`availableFilters`	json	`[]`	Defines available filters programmatically when declarative definitions are not used.
`filters`	json	`[]`	Gets or sets active filters programmatically.

Events

Event	Type	Description
`noora-filter-change`	`CustomEvent<{ filters: Array<Record<string, unknown>> }>`	Emitted when a filter is added, changed, or removed.

Slots

Name	Description
`default`	Declarative noora-filter-definition and noora-filter-value children.

Styling parts

Name	Description
`filter`	The filter container.
`active-filters`	The active-filter list.
`add`	The add-filter control.
`active-filter`	An active filter control.

Behavior

Changes emit a `noora-filter-change` event.