ComponentsEnterpriseFilterBar

FilterBar

FilterBar coordinates search, structured filters, active-filter removal, and result feedback above enterprise collections.

Composition APIResponsiveActive filtersResult feedback3 sizes

Overview

Use FilterBar to keep search, structured filters, reset, result feedback, and collection actions in one predictable area.

Project filters

Live preview

Search and status update the matching collection while active values remain visible.

  • Enterprise migrationMaya ChenActive
  • Billing controlsNoah WilliamsAt risk
  • Identity refreshAarav ShahComplete
  • Audit reportingMaya ChenActive
ProjectsFilterBar.tsx
tsx
import { FilterBar, Select } from 'omverse-ui'
 
<FilterBar
variant="bordered"
searchValue={search}
onSearchChange={setSearch}
searchLabel="Search projects"
filters={filters}
resultCount={results.length}
onReset={resetFilters}
actions={<Button variant="outlined">Export</Button>}
/>

Anatomy

FilterBar combines a search field, labelled controls, active-filter summary, result feedback, and optional actions.

⌕ Search projects
Status ▾Export
Status: Active ×12 results
12345
  1. 1
    Search

    Finds records using familiar identifying text.

  2. 2
    Filter controls

    Apply structured values through Select, DatePicker, or custom controls.

  3. 3
    Actions

    Contains related collection actions such as export.

  4. 4
    Active filters

    Shows applied values with individual removal.

  5. 5
    Result feedback

    Announces the current matching result count.

When to use

Use FilterBar when a collection needs multiple coordinated ways to narrow or act on results.

Recommended

  • Filter operational collections

    Use above DataTable, List, or Card collections with repeatable fields.

  • Keep active criteria visible

    Let people understand why the result set changed and remove criteria individually.

  • Support repeated refinement

    Use when people adjust several criteria during one task.

When not to use

Prefer simpler controls when the collection has one obvious narrowing mechanism.

Avoid

  • Do not use for one search field

    Place a labelled Input near the collection instead.

  • Do not use for form submission

    Use a Form layout when values create or update a record.

  • Do not hide essential navigation

    Filters modify results; they do not replace destinations or tabs.

Variants

Surface and density variants adapt FilterBar without changing its composition or semantics.

Plain

Use when the surrounding page already provides containment.

Bordered

Defines the filtering region on open surfaces.

Raised

Adds emphasis above complex or scrolling collections.

Sizes

Small, medium, and large preserve accessible target sizes.

States

FilterBar communicates availability, applied criteria, responsive disclosure, and asynchronous result updates.

StateTriggerVisual responseInteraction
DefaultNo criteria appliedEmpty search and default controlsReady for refinement
ActiveSearch or filter has a valueSummary and reset appearCriteria can be removed
ExpandedMobile Filters actionSecondary controls become visibleFocus order follows visual order
LoadingResults are updatingSearch progress and updating messageCurrent values remain visible
DisabledFiltering is unavailableReduced emphasisBuilt-in controls cannot activate
No resultsNo record matches0 results announcementCriteria remain removable

Behavior

FilterBar controls filter UI and announcements but leaves data fetching and domain-specific filtering to the application.

Search

Applications may debounce remote requests while keeping the value controlled.

Composition

Product teams supply controls appropriate to each field.

Responsive disclosure

Secondary filters collapse on narrow screens while search remains available.

Reset

One action restores every criterion to its default state.

Accessibility

FilterBar exposes a named search region, visible control labels, keyboard-operable removal, and polite result feedback.

KeyAction
TabMoves through search, filter controls, summaries, reset, and actions.
EnterSpaceActivates disclosure, removal, reset, or toolbar actions.
EscPreserves the focused control’s native dismissal behavior.
  • Provide a visible label for search and every filter.
  • Use native or accessible design-system controls.
  • Announce result count changes politely.
  • Give removal actions the filter name and active value.
  • Keep collapsed filters out of the focus order.
  • Maintain 44px minimum interactive targets.

Content guidelines

Labels and summaries should make applied criteria understandable without opening controls.

Name the field

Use concise nouns for filter labels.

ExampleStatus

Use inclusive defaults

Make the unfiltered option explicit.

ExampleAll statuses

Show label and value

Active summaries need enough context to stand alone.

ExampleStatus: Active

Report useful results

Use the collection’s noun when it adds clarity.

Example12 projects

Examples

Compose controls from the design system and keep their values controlled by the collection owner.

Active project filter

Live preview

Try search, status, individual removal, and reset in the live example.

  • Enterprise migrationMaya ChenActive
  • Billing controlsNoah WilliamsAt risk
  • Identity refreshAarav ShahComplete
  • Audit reportingMaya ChenActive
ProjectFilters.tsx
tsx
const filters: FilterBarFilter[] = [
{
id: 'status',
label: 'Status',
activeLabel: status || undefined,
onClear: () => setStatus(''),
control: (
<Select
aria-label="Status"
options={STATUS_OPTIONS}
value={status}
onChange={setStatus}
/>
),
},
]

Props / API

FilterBar extends div attributes; FilterBarFilter supplies a stable ID, label, control, and optional active summary.

Props

PropTypeDefaultDescription
searchValuestring''Current controlled search value.
onSearchChange(value: string) => voidundefinedRuns whenever search changes.
searchLabelstring'Search results'Visible and accessible search label.
searchPlaceholderstring'Search…'Prompt shown inside search.
filtersreadonly FilterBarFilter[][]Labelled custom controls with active summaries.
resultCountnumberundefinedNumber of matching results announced after updates.
formatResultCount(count: number) => stringresult(s)Formats result feedback.
onReset() => voidundefinedClears search and every active filter.
resetLabelstring'Reset filters'Labels the reset action.
actionsReactNodeundefinedAdditional end-aligned toolbar actions.
loadingbooleanfalseShows progress and announces result updates.
disabledbooleanfalseMarks the group unavailable and disables built-ins.
collapsiblebooleantrueCollapses secondary filters on narrow screens.
defaultExpandedbooleanfalseInitial narrow-screen filter visibility.
variant'plain' | 'bordered' | 'raised''plain'Sets the surrounding surface.
size'sm' | 'md' | 'lg''md'Controls field height, padding, and type scale.