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

Status

Date

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

Installation

Install the component from your command line.

npm install @raystack/apsara

import { FilterChip } from '@raystack/apsara/v1'

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

FilterChip Props

The FilterChip component accepts the following props:

label: Text label for the filter (string, required)
value: Current value of the filter (string)
columnType: Type of input ("select" | "date" | "text", default: "text")
options: Array of options for select type ({ label: string; value: string }[])
onValueChange: Callback when value changes ((value: string) => void)
onOperationChange: Callback when operation changes ((operation: string) => void)
leadingIcon: Icon element to display before the label
onRemove: Callback to remove the filter chip
className: Additional CSS class names

Input Types

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

With Leading Icon

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

With Remove Action

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