FilterChip

A compact, interactive element for filtering data with various input types.

Usage

1import { FilterChip } from "@raystack/apsara";

FilterChip Props

Prop

Type

Examples

Input Types

FilterChip supports four different input types to handle various filtering needs.

1<FilterChip
2  label="Status"
3  leadingIcon={<Info />}
4  columnType="select"
5  options={[
6    { label: "Active", value: "active" },
7    { label: "Inactive", value: "inactive" },
8  ]}
9/>

With Leading Icon

FilterChip can display an icon before the label to provide visual context.

1<FilterChip
2  label="Status"
3  leadingIcon={<Info />}
4  columnType="select"
5  options={[
6    { label: "Active", value: "active" },
7    { label: "Inactive", value: "inactive" },
8  ]}
9/>

With Remove Action

FilterChip can include a remove action to allow users to dismiss the filter.

1<FilterChip
2  label="Status"
3  leadingIcon={<Info />}
4  columnType="select"
5  options={[
6    { label: "Active", value: "active" },
7    { label: "Inactive", value: "inactive" },
8  ]}
9  onRemove={() => alert("Removed")}
10/>

Custom Operations

FilterChip supports custom filter operations through the operations prop. When specified, these operations override the default operations that are automatically selected based on the columnType.

  • When multiple operations are provided, they are rendered as a select dropdown
  • When a single operation is provided, it is displayed as static text
  • If no operations are specified, default operations are used based on the column type
1<Flex direction="column" gap={8} justify="center" align="center">
2  <FilterChip
3    label="Status"
4    leadingIcon={<Info />}
5    columnType="select"
6    options={[
7      { label: "Active", value: "active" },
8      { label: "Inactive", value: "inactive" },
9    ]}
10    operations={[
11      { label: "is", value: "is" },
12      { label: "is not", value: "is not" },
13    ]}
14  />
15  <FilterChip
16    label="Status"
17    leadingIcon={<Info />}
18    columnType="select"
19    options={[
20      { label: "Active", value: "active" },
21      { label: "Inactive", value: "inactive" },
22    ]}
23    operations={[{ label: "is", value: "is" }]}
24  />
25</Flex>