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 |
| filteredItems | 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. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once 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> |