block · filter-bar

Filter and action bar

A responsive native search-and-filter form with separate collection actions and normal Tab order.

Install with npx @madojs/ui@latest add filter-bar.

Composition

Wrap a GET form in a labelled search landmark, arrange labelled fields in the fields group, and keep submit/reset or auxiliary actions in their named regions.

Public API

element search / form: Native search landmark and progressively navigable query submission.
class mado-ui-filter-bar / search / form / fields / submit / actions: Responsive filtering composition hooks.

Detected public classes

Detected public CSS properties

Accessibility contract

Every field keeps its native label and name; the search landmark needs a useful accessible name when a page has more than one.
Result updates, loading state and applied-filter summaries belong to the consuming application.

Keyboard

The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

A GET action serializes filters into a shareable URL and remains complete without client-side routing or JavaScript.

Installation graph

Direct dependencies

Mado UI theme theme

Resolved install order

Mado UI theme theme

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.

blocks/filter-bar/mado-ui-filter-bar.css {styles}/mado-ui-filter-bar.css