Preview

Installation

npx sigma-ui@latest add faceted-filter

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { FacetedFilter } from '@/components/ui/faceted-filter';

const selected = ref<string[]>([]);
</script>

<template>
  <FacetedFilter
    v-model="selected"
    title="Status"
    :options="['Backlog', 'Todo', 'Done']"
  />
</template>

• v-model is the list of selected values.
• maxBadges limits how many selections are shown on the trigger before they collapse into a "+N" badge.
• allowCreate shows an Add button that emits create when the search matches nothing.

Examples

Basic

With Create Option

With Footer

API Reference

FacetedFilter

Props

Prop	Type	Default
titlerequired Label of the trigger button, also used as the search placeholder.	string	-
optionsrequired Values the user can pick from.	string[]	-
modelValuerequired Currently selected values; use with v-model.	string[]	-
maxBadges Maximum number of selected values shown as badges in the trigger before collapsing into a "+N" badge.	number	2
allowCreate Shows an "Add" button that emits create when the search text matches no option.	boolean	false
minWidth Minimum width of the dropdown, in pixels.	number	200

Events

Event	Payload
update:modelValue Emitted with the new selection when an option is toggled.	[value: string[]]
create Emitted with the trimmed search text when the user clicks the "Add" button.	[value: string]

Slots

Slot	Scope
footer Content rendered below the options, separated by a divider.	-

Accessibility

The trigger is a button that opens a listbox. Options are toggled with the keyboard, and selected values are exposed as badges.

Key	Description
Tab	Moves focus to the trigger.
Enter or Space	Opens the list.
ArrowDown	Moves to the next option.
ArrowUp	Moves to the previous option.
Enter	Toggles the focused option.
Escape	Closes the list.