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/v1";
 
<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; }[]
-
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")}
/>

On this page