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

FilterChipupdateUPDATE