FilterBar New Alpha Light DOM & Tailwind

Usage

The filter family is a small set of controls for building the filter toolbar above a list or table. They are composition-first and emit intent only: no component tracks which filters are active. Your app owns the active filters, the URL/query-string state and any data fetching; Nord supplies the controls, the layout and the accessible semantics.

import "@nordhealth/components/lib/FilterBar"
import "@nordhealth/components/lib/FilterInput"
import "@nordhealth/components/lib/FilterDropdown"
import "@nordhealth/components/lib/FilterDateRange"
import "@nordhealth/components/lib/FilterAddButton"
import "@nordhealth/components/lib/FilterResetButton"

Filter Bar is the layout wrapper: it lays its children out in a wrapping flex row with a consistent gap. Drop the filters inside it. Every filter renders the same joined chip — a leading icon, the filter's label, the active selection and a clear or remove affordance, dashed while empty.

The family is made up of:

• Filter Bar — the layout wrapper (flex, wrap, gap). Owns no state.
• Filter Input — a compact search/text field, rendered as a joined label / input / clear pill. Emits input and change.
• Filter Dropdown — an options filter: a chip that opens a popout with a (optionally searchable) option list, single or multiple select, grouped or tree options. Emits change, clear, remove, search-change, load-more, open, close.
• Filter Date Range — a date-range filter: a chip that opens a popout with the inline Date Range Picker (presets + calendar + Apply). Emits change, clear, remove, open, close.
• Filter Field — the presentation-only chip primitive. Use it as the slot="trigger" of your own popout-owning control for a custom filter. Emits clear, remove.
• Filter Add Button — a button that opens a popout of available filters and emits the chosen one. Emits select.
• Filter Reset Button — clears every active filter at once. Emits reset.

Examples

Filter input

Filter Input is a compact search field, rendered as a joined label / input / clear pill. It emits input as the user types and change when the value is committed. Add clearable to show a clear button. Set label to name it (it has no built-in label otherwise).

Filter input (chip mode)

Set mode="chip" to collapse the input behind a chip button that opens the field in a popout. This is handy in a crowded bar where the search field should not take up a full row.

Filter dropdown

Filter Dropdown is the options filter. It renders the chip and owns the popout, the search field and the option list. Pass options (flat, grouped or tree), set multiple for multi-select, searchable for an in-popout search, and selectAll for a select-all control. Show the active selection by setting value; it fires change when the selection changes, and clear/remove from the chip affordances.

For multi-select, add multiple: each option gains a checkbox, the popout stays open after each pick, and the chip summarises the selection as “ +N”. Pair it with selectAll for a select-all control.

Single select

A single-select dropdown picks one option and closes the popout. The chip summarises the chosen label.

Searchable options

Add searchable to filter a long option list from inside the popout.

Grouped options

Group options under headings by passing objects with a heading and their own children.

Tree options

Nest options to build a parent/child tree; selecting a parent toggles its descendants.

Select all

Add select-all to a multi-select dropdown for a single control that toggles every option.

Clearable

Add clearable so the chip exposes a clear affordance that resets the selection.

Removable

Add removable so the trailing affordance removes the whole filter from the bar.

Loading state

Set loading while options are being fetched to show a spinner in the popout.

Async options

Load options lazily when the popout opens, combining loading with a deferred options assignment.

Filter date range

Filter Date Range is the date-range filter. It renders the chip and a popout containing the inline Date Range Picker — presets, the two-month calendar and Apply. Set value to an ISO interval (YYYY-MM-DD/YYYY-MM-DD); it fires change on Apply and formats the range onto the chip for you. Add removable so the trailing affordance removes the whole filter.

Without presets

Add hide-presets to drop the preset list and show only the two-month calendar.

Min and max bounds

Constrain selectable dates with min and max so dates outside the range can't be picked.

Sizes

Filter Date Range comes in small, medium and large to match the surrounding bar.

Filter field (custom chip)

For a filter the dedicated components don't cover, use Filter Field — the presentation-only chip. Set label and a value summary (or active), and listen for clear/remove. Drop it into your own popout-owning control as its slot="trigger": the host opens and positions the popout and sets the ARIA. Here are the empty, active and removable states:

Add button

Filter Add Button opens a popout of available filters. Pass a flat list of options, or group them under headings via objects with a heading and their own options. Selecting an option fires a select event with the option's id and closes the popout — add the corresponding filter in the handler.

Reset button

Filter Reset Button fires a reset event when pressed. Bind disabled to whether any filter is active so it is only enabled when there is something to reset.

A complete bar

Put it together: a search input, an options filter, a date-range filter, an add button and a reset button — a typical data-table toolbar. Your app listens for the events and updates its own active-filter and URL state.

Accessibility

• Filter Input is a control only and has no built-in label. Set label for an accessible name, or wrap it in a Field with a Field Label.
• The icon-only clear and remove affordances expose their purpose to assistive technology via visually-hidden labels.
• The Add Button, Filter Dropdown and Filter Date Range triggers use aria-controls / aria-expanded to associate the trigger with its popout, and the popouts can be dismissed with Escape or by clicking outside.
• Filter Field is presentation-only: the popout-owning control it is slotted into wires the aria-controls / aria-haspopup / aria-expanded relationship.
• The controls emit intent only — make sure the active-filter state your app maintains in response is reflected in the UI (e.g. the chip value summary) so the current filters are announced.