Filter

Filters enable users to efficiently manage complex data sets by providing an intuitive interface for defining filter expressions.

Sass Variables

The Telerik and Kendo UI Filter is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the variables provided by the Button component.

Variable	Default Value	Computed Value	Value
`kendo-filter-padding-x`	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`	Default: `k-spacing(2)`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The horizontal padding of the Filter.
`kendo-filter-padding-y`	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`	Default: `k-spacing(1)`Computed: `var(--kendo-spacing-1, 0.25rem)`
Description: The vertical padding of the Filter.
`kendo-filter-bottom-margin`	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`	Default: `k-spacing(7.5)`Computed: `var(--kendo-spacing-7\.5, 1.875rem)`
Description: The bottom margin of the Filter.
`kendo-filter-line-size`	`1px`	`1px`	Default: `1px`Computed: `1px`
Description: The width of the line that connects the Filter items.
`kendo-filter-operator-dropdown-width`	`15em`	`15em`	Default: `15em`Computed: `15em`
Description: The width of the dropdown elements in the Filter items.
`kendo-filter-preview-field-text`	`k-color(primary)`	`var(--kendo-color-primary, #ff6358)`	Default: `k-color(primary)`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The text color of the Filter preview field.
`kendo-filter-preview-operator-text`	`k-color(on-app-surface)`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `k-color(on-app-surface)`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The text color of the Filter preview operator.
`kendo-filter-toolbar-focus-shadow`	`0 0 0 2px k-color(border-alt)`	`(0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))`	Default: `0 0 0 2px k-color(border-alt)`Computed: `(0 0 0 2px var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)))`
Description: The box shadow of the focused Filter toolbar.

Copyright © 2025 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.

Progress and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings. All rights in any other trademarks contained herein are reserved by their respective owners and their inclusion does not imply an endorsement, affiliation, or sponsorship as between Progress and the respective owners.