SelectedFacets

Save PDF

Last Updated: May 5, 2026
4 minute read

MarkLogic Server
Documentation

The SelectedFacets widget displays colored, labeled tags representing the facet values selected in a search application. The widget can display selections from these FastTrack widgets:

Example configuration

This React application code includes the SelectedFacets widget. The code configures the widget to display current selections from the four types of facet selection widgets.

import { SelectedFacets, useMarkLogicContext } from "ml-fasttrack"

const App = () => {
  const context = useMarkLogicContext();

  const handleChipClose = (type, facet, value) => {
    if (type === 'string') {
      context.removeStringFacetConstraint(facet, value)
    } else if (type === 'range') {
      context.removeRangeFacetConstraint(facet)
    }
  }

  return (
    <SelectedFacets
      dataConfig={{
        stringFacets: context.stringFacetConstraints,
        rangeFacets: context.rangeFacetConstraints,
      }}
      chipConfig={{
        closeConfig: { disabled: false },
        overrides: {
          string: {
            style: { color: 'red' },
          },
          number: {
            style: { color: 'green' },
          },
          date: {
            icon: <i className='fas fa-calendar' style={{ marginRight: 3 }}></i>,
            style: { color: 'blue' },
          },
        },
      }}
      separatorConfig={{
        betweenChips: ' | ',
        betweenNames: ' to ',
      }}
      onChipClose={handleChipClose}
    />
  )

}

Code explanation

The SelectedFacets widget displays tags based on the selected facet values provided via dataConfig.

The dataConfig prop supplies the facet selections to display. Pass stringFacets and/or rangeFacets arrays directly, or set useMarkLogicContext: true to read selections automatically from the MarkLogic context.
The single onChipClose callback replaces the previous separate removeStringFacet and removeRangeFacet callbacks. It receives the facet type ('string' or 'range'), the facet constraint object, and an optional value for multi-value string facets.
Call context.removeStringFacetConstraint(facet, value) or context.removeRangeFacetConstraint(facet) inside onChipClose to update the application context.
The chipConfig prop controls the visual appearance of all chips. Use chipConfig.overrides to apply different styles per facet type (e.g., 'string', 'number', 'date') or per facet name (e.g., 'price', 'color').
The separatorConfig prop controls the separators rendered between chips (betweenChips), between constraint names (betweenNames), and between constraint types (betweenTypes).

Note:

The StringFacet, DateRangeFacet, BucketRangeFacet, and NumberRangeFacet widgets are not shown in the Example Configuration.

Example rendering

This example shows the tags rendered by the SelectedFacets widget:

The tags rendered by the SelectFacets widget.

The Status facet is an example of a string facet that can only have a single selection. The Sources facet is an example of a string facet that can have multiple selections.

API

Prop	Type	Description
dataConfig (required)	object	Configuration for the facet data to display. Either set `useMarkLogicContext: true` to pull data from the MarkLogic context automatically, or provide `stringFacets` and/or `rangeFacets` arrays directly. See dataConfig API below.
separatorConfig	object	Configuration for custom separators rendered between chips, constraint names, and constraint types. See separatorConfig API below.
chipConfig	object	Configuration for the appearance and behavior of all facet chips. Accepts all ISelectedFacetNode props plus an optional `overrides` map keyed by facet type or name. See chipConfig API below.
onChipClose	((type: 'string' \| 'range', facet: Constraint, value?: string) => void)	Callback triggered when the close icon is clicked on a chip. Receives the facet `type`, the `facet` constraint object, and an optional `value` for multi-value string facets.

dataConfig API

Prop	Type	Description
useMarkLogicContext	boolean	When `true`, the component reads facet selections directly from the MarkLogic context. Cannot be combined with `stringFacets` / `rangeFacets`.
stringFacets	Constraint[]	Array of selected string facet constraints to display. Cannot be combined with `useMarkLogicContext`.
rangeFacets	Constraint[]	Array of selected range facet constraints to display. Cannot be combined with `useMarkLogicContext`.
facetRefs	Record<string, RefObject>	References to facet components, used under `ApplyFacetsProvider` to drive programmatic resets when chips are closed.

separatorConfig API

Prop	Type	Description
betweenChips	ReactNode	Separator rendered between individual facet chips.
betweenNames	ReactNode	Separator rendered between constraint names within a chip.
betweenTypes	ReactNode	Separator rendered between constraint types.

chipConfig API

The chipConfig prop accepts all ISelectedFacetNode fields (applied to every chip) plus an optional overrides map.

Prop	Type	Description
id	string	Widget `id` value.
label	ReactNode	Label to display for the chip. Overrides the facet value label.
icon	ReactNode	Icon element displayed alongside the chip label.
ariaLabel	string	Accessible `aria-label` value for the chip.
style	CSSProperties & { dashed?: boolean }	Inline CSS styles applied to the chip. Set `dashed: true` to render a dashed border style.
className	string	CSS class name applied to the chip container.
closeConfig	object	Configuration for the close icon on the chip. See closeConfig API below.
hidden	boolean	When `true`, the chip is not rendered. Default: `false`.
overrides	Record<string, ISelectedFacetNode>	Per-type or per-name overrides for chip appearance. Keys can be a facet type (e.g., `'string'`, `'number'`, `'date'`) or a specific facet name (e.g., `'price'`, `'color'`). Values are ISelectedFacetNode objects.

closeConfig API

Prop	Type	Description
disabled	boolean	When `true`, the close icon is hidden and chips cannot be dismissed. Default: `false`.
icon	ReactNode	Custom element to use as the close icon.
iconClassName	string	CSS class name applied to the close icon element.

Develop with FastTrack

SelectedFacets

Table of Contents

SelectedFacets

Example configuration

Code explanation

Example rendering

API

dataConfig API

separatorConfig API

chipConfig API

closeConfig API