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
Slot | Permitted tags | Description |
---|---|---|
heading | <h2> <h3> | The heading of the filter. |
Anonymous slot | The dynamic slot to add a pill to a spcific filter criteria value. |
Events
Name | Description |
---|---|
filter-reset | Dispatched when the user resets the form. |
filter-submit | Dispatched when the form is submitted. |
filter-change | Dispatched 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.
(Opens in Figma).
Last updated: