Filter Chip

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

Anatomy

Import and assemble the component:

1import { FilterChip } from "@raystack/apsara";
2

3<FilterChip />

Usage

The input type decides what the chip edits: text, a number, a date, or a list of options. Everything else follows from it.

Input types

FilterChip supports five input types, select, multiselect, date, string, and number, to handle various filtering needs. multiselect takes a string[] value and summarizes two or more selections as "N selected".

1<FilterChip
2  label="Status"
3  leadingIcon={<Info />}
4  columnType="select"
5  options={[
6    { label: "Active", value: "active" },
7    { label: "Inactive", value: "inactive" },
8  ]}
9/>

Select with autocomplete

Use selectProps to enable autocomplete search on select and multiselect filter types. This renders a search input inside the dropdown for filtering options.

1<FilterChip
2  label="Status"
3  leadingIcon={<Info />}
4  columnType="select"
5  options={[
6    { label: "Active", value: "active" },
7    { label: "Inactive", value: "inactive" },
8    { label: "Pending", value: "pending" },
9    { label: "Archived", value: "archived" },
10  ]}
11  selectProps={{ autocomplete: true }}
12/>

Date with calendarProps

Use calendarProps to forward DatePicker options such as dateFormat, timeZone and slotProps.calendar to the chip's date control. value, onSelect, and defaultValue are owned by FilterChip, and children is excluded so the chip's input trigger isn't replaced.

1<FilterChip
2  label="Created"
3  leadingIcon={<Info />}
4  columnType="date"
5  calendarProps={{
6    dateFormat: "YYYY-MM-DD",
7    slotProps: {
8      calendar: { captionLayout: "dropdown" },
9    },
10  }}
11/>

With leading icon

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

1<FilterChip
2  label="Status"
3  leadingIcon={<Info />}
4  columnType="select"
5  options={[
6    { label: "Active", value: "active" },
7    { label: "Inactive", value: "inactive" },
8  ]}
9/>

With remove action

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

1<FilterChip
2  label="Status"
3  leadingIcon={<Info />}
4  columnType="select"
5  options={[
6    { label: "Active", value: "active" },
7    { label: "Inactive", value: "inactive" },
8  ]}
9  onRemove={() => alert("Removed")}
10/>

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
1<Flex direction="column" gap={8} justify="center" align="center">
2  <FilterChip
3    label="Status"
4    leadingIcon={<Info />}
5    columnType="select"
6    options={[
7      { label: "Active", value: "active" },
8      { label: "Inactive", value: "inactive" },
9    ]}
10    operations={[
11      { label: "is", value: "is" },
12      { label: "is not", value: "is not" },
13    ]}
14  />
15  <FilterChip

Controlled

Pass value with onValueChange to own the filter. Do this when the chip drives a query and the value has to survive a refetch or a shared URL.

1(function ControlledFilterChip() {
2  const [status, setStatus] = React.useState("active");
3

4  return (
5    <Flex direction="column" gap={5}>
6      <FilterChip
7        label="Status"
8        columnType="select"
9        value={status}
10        onValueChange={setStatus}
11        options={[
12          { label: "Active", value: "active" },
13          { label: "Inactive", value: "inactive" },
14        ]}
15      />

API Reference

Renders an interactive chip for filtering content.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
filter-chipThe chip root
filter-chip-labelLabel group (icon + text)
filter-chip-label-textThe label text
filter-chip-leading-iconLeading icon wrapper (when leadingIcon is set)
filter-chip-operationThe operation control (static text or select trigger)
filter-chip-operation-textThe selected operation's text
filter-chip-valueThe value control (select trigger, date field, or input wrapper)
filter-chip-removeThe remove button (when onRemove is set)
filter-chip-remove-iconThe icon inside the remove button

Accessibility

  • Uses button role with appropriate ARIA attributes
  • Supports keyboard activation and removal
  • Active filter state is communicated via aria-pressed