FilterBar | Neural UI v2

Usage

filters contains the full catalogue with stable keys, labels and optional active flags. filterChange emits only active filters: update each catalogue item's active flag by key, preserving inactive options, then filter your own data. multi=false keeps at most one active chip; clearable resets all active flags. FilterBar does not query a backend or filter a Table automatically.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Events: 0

multi

clearable

Advanced options · 2

<neu-filter-bar
  [filters]="localizedFilters()"
  [multi]="true"
  [clearable]="true"
  [clearLabel]="'Clear all'"
  (filterChange)="onFilterChange($event)"
  [ariaLabel]="'Order filters'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const localizedFilters = signal([
  {
    "key": "open",
    "label": "Open",
    "active": true
  },
  {
    "key": "closed",
    "label": "Closed"
  },
  {
    "key": "urgent",
    "label": "Urgent"
  }
]);

Data, callback and structured configuration inputs

State and events

The application owns the full filter catalogue. filterChange contains active filters only; accept it by updating active flags by key without replacing or removing catalogue entries. An empty payload means no active filters, not an empty catalogue.

Accessibility and keyboard

Tab reaches each chip; Enter/Space toggles it. The pressed state reflects the applied active flag.

Key	Action
`Tab`	Focus each enabled filter chip.
`Enter`	Propose toggling the focused filter; the applied active value controls its pressed state.
`Space`	Propose toggling the focused filter; the applied active value controls its pressed state.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`'Filters'`	`[ariaLabel]`	Accessible name of the control or region.
`clearable`	`boolean`	`true`	`[clearable]`	Shows a clear action when a value is selected.
`clearLabel`	`string`	`'Clear all'`	`[clearLabel]`	Label for the clear-selection action.
`filters`	`readonly NeuFilterChip[]`	`[]`	`[filters]`	Chips with stable keys, labels and applied active flags.
`multi`	`boolean`	`true`	`[multi]`	Allow several active filters; false keeps at most one.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`filterChange`	`NeuFilterChip[]`	`(filterChange)="onFilterChange($event)"`	Proposes the complete updated filter array, including active states. Replace filters to accept it.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuFilterChipTypeScript

import type { NeuFilterChip } from '@neural-ui/core/filter-bar';

// Public declaration (reference only)
export interface NeuFilterChip {
  active?: boolean;
  key: string;
  label: string;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-dark`	Dark brand shade; outline and ghost Button text in the light theme	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-border-color`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-border)`
`--neu-radius-full`	Corner radius	Shared by other Core consumers; scope the override.	`9999px`
`--neu-surface-1`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-surface)`
`--neu-text-primary`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-text)`
`--neu-text-secondary`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-text-muted)`

Related components

Use related components when your task requires a different interaction or a composed control.