FilterChip

<Flex direction="column" gap="large" align="center">
  <FilterChip
    label="Status"
    leadingIcon={<Info />}
    columnType="select"
    options={[
      { label: "Active", value: "active" },
      { label: "Inactive", value: "inactive" },
    ]}
  />
  <FilterChip label="Date" leadingIcon={<Info />} columnType="date" />
  <FilterChip label="Search" leadingIcon={<Info />} columnType="text" />
</Flex>

Usage

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

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

Prop	Type	Default
`label`	`string`	-
`value`	`string`	-
`columnType`	`"select" \| "date" \| "text"`	-
`options`	`{ label: string; value: string; }[]`	-
`onValueChange`	`(value: string) => void`	-
`onOperationChange`	`(operation: string) => void`	-
`leadingIcon`	`ReactNode`	-
`onRemove`	`() => void`	-
`className`	`string`	-

Examples

Input Types

FilterChip supports three 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")}
/>