Skip to main content

Faceted

Form Controls
Stable

Faceted filter component for advanced single or multi-select filtering. Displays selected values as badges in the trigger.

Quick Import
Full Documentation
import { Faceted } from "@cohere-ai/waypoint-ui/faceted";

Live Preview

Loading Faceted...
Open in StorybookOpen in v0View Docs

Props

NameTypeDefaultDescription
valuestring | string[]-Selected value(s)
onValueChangefunction-Callback on selection change
multiplebooleanfalseEnable multi-select mode
options (FacetedBadgeList){ value, label }[]-Options to display as badges
max (FacetedBadgeList)number2Max badges before overflow count
placeholder (FacetedBadgeList)string'Select options...'Placeholder when nothing selected
value (FacetedItem)*string-Item value

* Required prop

Examples

Multi-select Filter

Faceted filter for a status column

1
import {
2
  Faceted, FacetedTrigger, FacetedContent, FacetedInput,
3
  FacetedList, FacetedItem, FacetedBadgeList,
4
} from '@cohere-ai/waypoint-ui/faceted';
5
 
6
<Faceted value={selected} onValueChange={setSelected} multiple>
7
  <FacetedTrigger asChild>
8
    <Button variant="outline">
9
      <FacetedBadgeList options={options} placeholder="Filter status..." />
10
    </Button>
11
  </FacetedTrigger>
12
  <FacetedContent>
13
    <FacetedInput placeholder="Search..." />
14
    <FacetedList>
15
      {options.map((opt) => (
16
        <FacetedItem key={opt.value} value={opt.value}>{opt.label}</FacetedItem>
17
      ))}
18
    </FacetedList>
19
  </FacetedContent>
20
</Faceted>

Found an Issue?

If you've encountered a bug or have feedback about the Faceted component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.