Rebar UI

1.0

imitation

Filter Bar

A search input, an optional filter select and a primary action in one row.

Project filtersSearch, status filter and a New project button
Search only
With filter
Action only

In context

Projects pageAbove the project list

Projects

Harbour rebrand
On track
Tideline mobile
Review
Crew interviews
Late
Rota export
Done
Depot signage
Review

Search and filter bar

Perspectives galleryType, pick a category, change the sort: the count and the grid follow
6 Perspectives
Block, with pills and count
24 Perspectives
Pills only
On a phonePills scroll sideways; every target is 44px or more
6 Perspectives

FilterBar props

PropTypeRequiredDefault
searchboolean | undefinedNo—
searchValuestring | undefinedNo—
defaultSearchValuestring | undefinedNo
onSearchChange((value: string) => void) | undefinedNo—
searchPlaceholderstring | undefinedNoSearch
searchLabelstring | undefinedNoSearch
optionsFilterPillOption[] | undefinedNo—
valuestring | undefinedNo—
defaultValuestring | undefinedNo—
onValueChange((value: string) => void) | undefinedNo—
filterLabelstring | undefinedNoFilter
scrollPillsboolean | undefinedNofalse
sortOptionsFilterBarSortOption[] | undefinedNo—
sortValuestring | undefinedNo—
defaultSortValuestring | undefinedNo—
onSortChange((value: string) => void) | undefinedNo—
sortLabelstring | undefinedNoSort
countnumber | undefinedNo—
nounstring | undefinedNoresult
pluralstring | undefinedNo—
actionsReactNodeNo—
onClear(() => void) | undefinedNo—

FilterPills props

PropTypeRequiredDefault
optionsFilterPillOption[]Yes—
valuestring | undefinedNo—
defaultValuestring | undefinedNo—
onValueChange((value: string) => void) | undefinedNo—
aria-labelstring | undefinedNoFilter
scrollboolean | undefinedNofalse

ResultCount props

PropTypeRequiredDefault
countnumberYes—
nounstring | undefinedNoresult
pluralstring | undefinedNo—
querystring | undefinedNo—
filterstring | undefinedNo—
onClear(() => void) | undefinedNo—
clearLabelstring | undefinedNoClear filters

Search, filter, sort and count

FilterBar is the component behind the block's new fields: a pill search field (Escape or the clear button empties it), single-select FilterPills with an optional count each, a pill-shaped sort Select with a muted label, and a ResultCount live region ("9 Perspectives in Ethics") with a Clear filters button. Every value is controlled or uncontrolled. When the count is 0 render an Empty in place of the grid.

The filter-bar block turns on this look when it has pills, sortOptions or resultCount. Otherwise it stays the plain search, select and button row.

{ type: "filter-bar", searchPlaceholder: "Search Perspectives…", pills: ["All", "Ethics", "Grace"], sortOptions: ["Newest", "Oldest"], resultCount: { count: 24, noun: "Perspective" } }

Accessibility

The search is a real type="search" input named by searchLabel. The pills are a named group of toggle buttons (aria-pressed), 44px tall. The count is role="status" (polite), so a screen reader hears the new total after each change. On a phone scrollPills keeps the pills on one line and scrolls them sideways.

Shape

{ type: "filter-bar", searchPlaceholder?: string, filterLabel?: string, filterOptions?: string[], actionLabel?: string, pills?: string[], sortOptions?: string[], sortLabel?: string, resultCount?: { count: number, noun?: string, plural?: string } }