FilterBar

API reference and demos for FilterBar.

Source

Import

import { FilterBar } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Lookup Icons Only · Open in Storybook

Lookup Icons With Placeholder · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
applyLabel	string	Apply	Label for the Apply button.
autoSubmit	boolean	true	When false, debounced fields forward edits immediately and an Apply button is rendered in the trailing slot. Defaults to true.
children	ReactNode	—	Additional content rendered in the filter row.
className	string	—	Classes applied to the root bar.
dateRange	FilterBarRangeProps	—	Date-only range control.
filters	FilterBarFilter[]	—	Structured filters rendered after search.
isPending	boolean	false	Shows a pending state on the Apply button.
leading	ReactNode	—	Content rendered before search and filters.
onApply	(…) => void	—	Called by the Apply button when `autoSubmit` is false.
overflowMode	enum	responsive	`responsive` moves hidden filters into an overflow popover; `wrap` lets them wrap. Below the `md` breakpoint both modes collapse every filter into the Filters sheet, so a phone never stacks one filter per row.
overlay	ReactNode	—	Content that takes the bar's place while it is present — a bulk-action bar that owns the row while rows are selected, say. The bar's own controls stay mounted, hidden rather than unmounted, so a half-typed search survives the takeover and the row keeps whichever of the two is taller. Nothing below it moves.
search	FilterBarSearchProps	—	Optional global search control shown first.
timeRange	FilterBarRangeProps	—	Date-time range control.
trailing	ReactNode	—	Content rendered at the end of the bar.