FilterChipupdateUPDATE

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

Usage

The FilterChip component provides a compact way to filter data with support for different input types like select, date, string and number.

import { FilterChip } from "@raystack/apsara";
 
<FilterChip
  label="Status"
  leadingIcon={<InfoCircledIcon />}
  columnType="select"
  options={[
    { label: "Active", value: "active" },
    { label: "Inactive", value: "inactive" },
  ]}
  onValueChange={value => console.log(value)}
/>;

FilterChip Props

PropTypeDefault
label
string
-
value
string
-
columnType
"string" | "number" | "select" | "date"
"string"
variant
"default" | "text"
"default"
options
{ label: string; value: string; }[]
-
operations
{ label: string; value: string; }[]
-
onValueChange
(value: string) => void
-
onOperationChange
(operation: string) => void
-
leadingIcon
ReactNode
-
onRemove
() => void
-
className
string
-

Examples

Input Types

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

<FilterChip
  label="Status"
  leadingIcon={<Info />}
  columnType="select"
  options={[
    { label: "Active", value: "active" },
    { label: "Inactive", value: "inactive" },
  ]}
/>

With Leading Icon

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

<FilterChip
  label="Status"
  leadingIcon={<Info />}
  columnType="select"
  options={[
    { label: "Active", value: "active" },
    { label: "Inactive", value: "inactive" },
  ]}
/>

With Remove Action

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

<FilterChip
  label="Status"
  leadingIcon={<Info />}
  columnType="select"
  options={[
    { label: "Active", value: "active" },
    { label: "Inactive", value: "inactive" },
  ]}
  onRemove={() => alert("Removed")}
/>

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
<Flex direction="column" gap={8} justify="center" align="center">
  <FilterChip
    label="Status"
    leadingIcon={<Info />}
    columnType="select"
    options={[
      { label: "Active", value: "active" },
      { label: "Inactive", value: "inactive" },
    ]}
    operations={[
      { label: "is", value: "is" },
      { label: "is not", value: "is not" },
    ]}
  />
  <FilterChip
    label="Status"
    leadingIcon={<Info />}
    columnType="select"
    options={[
      { label: "Active", value: "active" },
      { label: "Inactive", value: "inactive" },
    ]}
    operations={[{ label: "is", value: "is" }]}
  />
</Flex>

On this page