Filter Bar | Zyeon UI

Preview in your theme

Mixed filter types over a real table — opens with Status (select) and Priority (multiselect) already applied. “Add filter” lists the fields still available; every chip opens its own editor and carries its own remove button. The Owner list has one disabled facet (“Unassigned”) with zero rows behind it.

Showing 4 of 24 tasks

Task	Status	Priority	Owner	Created
Rework checkout error statesT-101	In review	Urgent	Ana Ortiz	Mar 11
Invoice PDF renders blank on SafariT-104	In review	High	Tomás Rivera	Mar 4
Team invite emails bounceT-109	In review	Urgent	Iris Novak	Feb 25
Sandbox keys leak into prod logsT-120	In review	Urgent	Felix Braun	Mar 13

Over-filtered on purpose: no task is done, urgent and owned by Ana at once, so the table shows its empty state — “Clear all” (top right) is the way back.

Showing 0 of 24 tasks

Task	Status	Priority	Owner	Created

No tasks match these filters. Remove a chip or use “Clear all”.

maxVisible={3}: six filters are active, three render as chips and the rest collapse into “+3 more”, which expands them in place (and “Show less” folds them back). Filtering is unaffected by what is folded away.

3 matching tasks

Rate limit the public APIOmar Haddad · Mar 2
Webhook retries hammer subscribersAna Ortiz · Feb 20
Mobile nav traps focusLena Fischer · Mar 6

No cap inside a narrow shell: the bar wraps onto extra lines rather than scrolling sideways or squashing chips. Editors are portalled, so they still open at full size over the card edge.

4 matching tasks

Audit log retention policyWei Zhang · Jan 22
Dark mode contrast passLena Fischer · Jan 14
Onboarding checklist copyFelix Braun · Jan 30
Keyboard shortcuts cheat sheetIris Novak · Jan 8

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro