Requestor
@acstll
Problem Statement
EuiSearchBar renders its filters inside an EuiFilterGroup, but there is no way to set compressed on that group from the EuiSearchBar API. EuiFilterGroup already supports a compressed prop that reduces its height to match compressed form controls, but it is hardcoded without that prop in EuiSearchBarFilters. The search input (EuiFieldSearch) can be made compressed via box={{ compressed: true }}, but there is no equivalent for the filter buttons — and no single prop that makes the whole bar compact at once.
Proposed Solution
Add a top-level compressed prop to EuiSearchBarProps that drives both the search input and the filter group:
<EuiSearchBar filters={myFilters} compressed />Internally, this would forward compressed to EuiFieldSearch (via box) and to EuiFilterGroup (via EuiSearchBarFilters). A consumer who needs fine-grained control can still override via box={{ compressed: false }}.
Use Case
Any product that places EuiSearchBar with filters inside a toolbar or header area that uses compressed-size form controls. Today, consumers must pass box={{ compressed: true }} for the input and have no opt-in at all for the filter buttons, leaving them at full height with no workaround short of CSS overrides.
Value / Impact
- Enables visual consistency in dense or compact layouts with a single prop.
- Low-effort change:
EuiFilterGroup and EuiFieldSearch already support compressed — it just needs to be exposed one level up and threaded through.
- It is very unlikely a consumer would want the input compressed but not the filters, or vice versa, so a unified prop matches the real-world use case.
Urgency
Nice-to-have; no hard deadline. Currently blocked by a missing API, not missing functionality in the underlying components.
Do alternatives or workarounds exist?
Partially. box={{ compressed: true }} compresses the search input, but there is no equivalent for the filter group. CSS overrides targeting .euiFilterGroup are the only current option for the filters, which is not stable.
Related code or customizations
Requestor
@acstll
Problem Statement
EuiSearchBarrenders its filters inside anEuiFilterGroup, but there is no way to setcompressedon that group from theEuiSearchBarAPI.EuiFilterGroupalready supports acompressedprop that reduces its height to match compressed form controls, but it is hardcoded without that prop inEuiSearchBarFilters. The search input (EuiFieldSearch) can be made compressed viabox={{ compressed: true }}, but there is no equivalent for the filter buttons — and no single prop that makes the whole bar compact at once.Proposed Solution
Add a top-level
compressedprop toEuiSearchBarPropsthat drives both the search input and the filter group:Internally, this would forward
compressedtoEuiFieldSearch(viabox) and toEuiFilterGroup(viaEuiSearchBarFilters). A consumer who needs fine-grained control can still override viabox={{ compressed: false }}.Use Case
Any product that places
EuiSearchBarwith filters inside a toolbar or header area that uses compressed-size form controls. Today, consumers must passbox={{ compressed: true }}for the input and have no opt-in at all for the filter buttons, leaving them at full height with no workaround short of CSS overrides.Value / Impact
EuiFilterGroupandEuiFieldSearchalready supportcompressed— it just needs to be exposed one level up and threaded through.Urgency
Nice-to-have; no hard deadline. Currently blocked by a missing API, not missing functionality in the underlying components.
Do alternatives or workarounds exist?
Partially.
box={{ compressed: true }}compresses the search input, but there is no equivalent for the filter group. CSS overrides targeting.euiFilterGroupare the only current option for the filters, which is not stable.Related code or customizations
EuiFilterGroupalready acceptscompressed—filter_group.tsxEuiSearchBarFiltersrenders the group but exposes no way to configure it —search_filters.tsx