Facets Customization

This page covers filters/facets across all supported facet types.

Note: Facet markers, classes, and body types documented below are emitted by the storefront runtime. The per-row data-kea-role="facet-option" and data-kea-action="facet.toggle" markers are emitted on every facet option. The per-value data-kea-facet-value and data-kea-selected markers are emitted by the string, color, and inline facet body types; the string-compact and multilevel body types do not currently emit per-value markers.

What you can change

• group headers and spacing,
• option row styling,
• selected-state visuals,
• facet-specific styling by key (brand, color, price, etc.).

Example

/* Group container */
[data-kea-role="facet-group"] {
  border-bottom: 1px solid var(--kea-color-border, #e8e8e8);
  padding-bottom: var(--kea-spacing-sm, 8px);
  margin-bottom: var(--kea-spacing-md, 16px);
}

/* Option rows */
[data-kea-role="facet-option"] {
  border-radius: var(--kea-radius-md, 4px);
}

/* Selected values (where this marker is emitted) */
[data-kea-role="facet-option"][data-kea-selected="true"] {
  background: var(--kea-color-surface-alt, #f5f5f5);
  border-color: var(--kea-color-accent, #4b4efc);
}

/* Facet-key scoped example */
[data-kea-role="facet-group"][data-kea-facet-key="color"] [data-kea-role="facet-option"] {
  min-height: 36px;
}

Facet type rendering behavior

Facet type	Option role/action markers	Value-state markers
string	Yes (data-kea-role="facet-option", data-kea-action="facet.toggle")	Yes (data-kea-facet-value, data-kea-selected)
string-compact	Yes	No per-value markers on row in current version
string-inline	Yes	Yes (data-kea-facet-value, data-kea-selected)
number	N/A (range slider control)	N/A (range is slider state, not option rows)
boolean	N/A (toggle switch control)	N/A (switch state is not exposed as per-value markers)
color	Yes	Yes (data-kea-facet-value, data-kea-selected)
multilevel	Yes	No per-value markers on row in current version

Documented selectors and markers for this block

• Classes: .kea-facets__group, .kea-facets__option, .kea-facet-wrapper-container, .kea-facet-block-header, .kea-facet-option-container, .kea-check-box-wrapper, .kea-input-row, .kea-range-container.
• Group markers: data-kea-role="facet-group", data-kea-facet-key.
• Option markers: data-kea-role="facet-option", data-kea-action="facet.toggle".
• Value markers (type-dependent): data-kea-facet-value, data-kea-selected.

Known limits

string-compact and multilevel currently do not emit per-value data-kea-selected markers on rows.

If behavior breaks

• Verify data-kea-action="facet.toggle" is still present on clickable options.
• Re-test apply/clear/close flows after CSS changes, especially on mobile panels.