Filter | Calcite Design System

Filter is a filtering component where a user can filter through data to get customized search results.

Overview

Filter is a useful utility component which can house large amounts of data. Users can interact with the data most relevant to their workflow without having all data load on initialization, allowing your application to load faster and be more accessible to wider audiences.

Visit the Filter recent earthquakes tutorial to view an application of the Filter component.

Usage

Limit large data from loading on initialization
Enable your user to navigate through data

API reference

Properties

Property	Attribute	Description	Type	Default
disabled	disabled	When `true`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
filteredItemsread-only		The component's resulting items after filtering.	`object[]`
filterProps		When `value` is an object, specifies the properties to match against when filtering. If not set, all properties will be matched.	`string[] \| undefined`
items		Specifies the items to filter. The component uses the values as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is needed to conduct filtering.	`object[]`
label	label	Specifies an accessible label for the component.	`string \| undefined`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
placeholder	placeholder	Specifies the component's input placeholder text.	`string \| undefined`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
value	value	The component's value.	`string`

Styles

Name	Description
--calcite-filter-content-space	Specifies the padding of the component's content.
--calcite-filter-input-background-color	Specifies the component's input background color.
--calcite-filter-input-border-color	Specifies the component's input border color.
--calcite-filter-input-corner-radius	Specifies the component's input corner radius.
--calcite-filter-input-shadow	Specifies the component's input shadow.
--calcite-filter-input-icon-color	Specifies the component's input icon color.
--calcite-filter-input-text-color	Specifies the component's input text color.
--calcite-filter-input-placeholder-text-color	Specifies the component's input placeholder text color.
--calcite-filter-input-actions-background-color	Specifies the background color of the component's input `clearable` element.
--calcite-filter-input-actions-background-color-hover	Specifies the background color of the component's input `clearable` element when hovered.
--calcite-filter-input-actions-background-color-press	Specifies the background color of the component's input `clearable` element when pressed.
--calcite-filter-input-actions-icon-color	Specifies the icon color of the component's input `clearable` element.
--calcite-filter-input-actions-icon-color-hover	Specifies the icon color of the component's input `clearable` element when hovered.
--calcite-filter-input-actions-icon-color-press	Specifies the icon color of the component's input `clearable` element when pressed.

Events

Name	Description	Behavior
calciteFilterChange	Fires when the filter text changes.	bubblescomposed

Methods

Name Description Signature

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
filter	Performs a filter on the component. This method can be useful because filtering is delayed and asynchronous.	`filter(value?: string): Promise<void>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`

componentOnReady

Creates a promise that resolves once the component is fully loaded.

componentOnReady(): Promise<this>

filter

Performs a filter on the component.

This method can be useful because filtering is delayed and asynchronous.

filter(value?: string): Promise<void>

setFocus

Sets focus on the component.

setFocus(options?: FocusOptions): Promise<void>