A composed search region for filters in data-heavy product views.
FilterBar groups query inputs, select controls, date controls, and filter actions into one calm surface without turning the filter row into a heavy card.
Use for query controls that affect the data below.
<FilterBar aria-label="Package filters">
<SearchInput aria-label="Search releases" placeholder="Search releases..." />
<Select defaultValue="open">
<SelectTrigger aria-label="Release state">
<SelectValue placeholder="State" />
</SelectTrigger>
<SelectContent>
<SelectItem value="open">Open</SelectItem>
<SelectItem value="done">Done</SelectItem>
<SelectItem value="blocked">Blocked</SelectItem>
</SelectContent>
</Select>
<Button>Apply</Button>
</FilterBar>import {
Button,
FilterBar,
SearchInput,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@froggdesign/enter-ui-react";Compact mode keeps filter rows usable on narrower product screens.
FilterBar renders role="search". Provide aria-label when there are multiple search or filter regions on the same page. Use DataToolbar for table actions; use FilterBar when the controls change the result set.
density: normal or compact.className.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.