Skip to content

Filter

<nsx-filter>

Overview

A filter component allows users to filter data based on their requirements.

✨ This is an auto-generated AI summary of the nsx-filter's documentation. It may not be accurate. ✨

Use to allow users to filter a list of items based on a set of criteria. It is commonly used in product listings and other scenarios to narrow down a large list of items.

Examples

Guidance

Implementation

Placement

The nsx-filter component can only be used as a child of the <ns-column> element.

Specification

Attributes

filter-data
Property
filterData
Description
An array of objects that contains the filter criteria.
Type
Array
Default
[]
submit-on-change
Property
submitOnChange
Description
Toggle to trigger the form submission on change of each filter criteria.
Type
boolean
Default
false
type
Property
type
Type
string
Default
standard

Slots

SlotPermitted tagsDescription
heading<h2> <h3> The heading of the filter.
Anonymous slotThe dynamic slot to add a pill to a spcific filter criteria value.

Events

NameDescription
filter-resetDispatched when the user resets the form.
filter-submitDispatched when the form is submitted.
filter-changeDispatched when each of the filter criteria is changed by the user.

Specification notes

filter-data
[
{
"heading": "Typewriter artisan",
"expand": false,
"name": "typewriter-artisan",
"value": "2",
"option": "radio",
"helper": "Activated charcoal praxis bespoke glossier tacos?",
"optionData": [
{
"label": "Helvetica gentrify",
"value": "Z",
"checked": true,
"counter": 2
},
{
"label": "Post-ironic messenger",
"value": "Y",
"checked": false
}
...
]
}
...
]

Figma

Please note: The nsx-filter Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Last updated: