FilterChip

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

Prop	Type	Default
`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>

FilterChipupdateUPDATE