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.
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.
With Leading Icon
FilterChip can display an icon before the label to provide visual context.
With Remove Action
FilterChip can include a remove action to allow users to dismiss the filter.
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