Multi-Value Search Component
Changed on:
2 Apr 2025
Overview
The Multi-Value Search Component is an interactive UI element designed to facilitate flexible multi-value input. It enables users to enter free-text search terms, dynamically converting them into individual chips while ensuring duplicate values are removed automatically.
This component supports two search modes: context search (default), which allows partial matches, and exact search (configurable) for strict term matching.
| Plugin Name | Core |
|---|
The standard library of components.
v1.0.0
Initial changelog entry.
Alias
fc.field.multistring
Detailed technical description
The Multi-Value Search Component includes an input field that allows users to enter free-text values, dynamically converting them into chips. It prevents duplicate values and supports two search modes: Context Search (default) and Exact Search (optional, configurable via `exactSearch`).
Clicking the input activates the component, allowing users to enter values and interact with the following elements:
- Chip Display Area:
- Displays selected values as individual chips.
- Automatically removes duplicate entries.
- Trims leading and trailing spaces from input values.
- Ignores empty strings, preventing them from being added.
- Supports the
`visibleItemsThreshold`property to limit displayed chips before collapsing excess into a dropdown.
- Search Mode Selection (Configurable Property):
- Context Search (default): Matches input within existing values.
- Exact Search (
`exactSearch: true`): Enforces strict, case-sensitive matching.
- Button Block:
- Clear: Removes all selected values.
- Cancel: Restores the initial values and closes the input field.
- Apply: Confirms the entered values and finalizes selection.
Properties
Name | Type | Required | Default Value | Description |
exactSearch |
| No |
| Defines search behavior. When set to |
visibleItemsThreshold |
| No | 2 | Specifies the minimum number of items to display in the input as a positive integer. |
Configuration example
1{
2 "descendants": [
3 {
4 "component": "fc.filterPanel",
5 "props": {
6 "allowReadWriteUrlParams": true,
7 "overrides": {
8 "status": {
9 "component": "fc.field.multistring",
10 "label": "fc.gql.status.label",
11 "exactSearch": true,
12 "visibleItemsThreshold": 3
13 }
14 }
15 }
16 }
17 ]
18}Version History
v1.0.0
Initial release
Recommended Placement
The Multi-Value Search Component is best placed as part of a form or as a standalone filter for datasets.
