FilterDialog

A button that opens the filter editor in a dialog. Edits are staged: only Apply emits.

Install

ReactSvelte

pnpm dlx shadcn@latest add https://sg-widgets.vercel.app/r/react/filter-dialog.json

pnpm dlx shadcn-svelte@latest add https://sg-widgets.vercel.app/r/svelte/filter-dialog.json

FilterDialog: empty, two filters applied, a Note read-state row, and sizes

ReactSvelte

Reduce motionRadius: themeRadius: noneRadius: smRadius: mdRadius: lgRadius: xl

React

Loading the React demo…

Svelte

Loading the Svelte demo…

With no filters it is one Add filters button. With filters applied it becomes Edit filters, carries the count of conditions that would be sent, and gains a control that clears them without opening anything.

Props

prop	type	default	meaning
entityType	string	required	Type the editor reads its fields on.
context	SgContext	required	The widget context. Every read goes through it, so widgets on a page share one cache.
value	FilterGroup	required	The applied tree. Two-way in Svelte through bind:value.
hidePaths	string[]	[]	Passed through to the editor.
label	string	—	Replaces both button labels.
title	string	'Filters'	Dialog title.
disabled	boolean	false	Blocks both buttons.
open	boolean	false	Whether the dialog is showing. Two-way in Svelte.
size	'sm' | 'md' | 'lg'	'md'	Launcher heights 7, 8 and 9. Passed to the editor inside.
class / className	string	—	Merged after the widget's own classes.

Every other attribute is spread onto the root: id, aria-*, data-*, key handlers and a ref to the root element.

Events

event	payload	when
onValueChange	FilterGroup	The tree was applied, by Apply, Clear all or the clear control, never while editing. Svelte also binds it with bind:value.
onOpenChange	boolean	The dialog opened or closed. Svelte also binds it with bind:open.

Slots

The three the editor takes, forwarded unchanged.

slot	receives	draws
fieldChooser	entityType, the current path, hidePaths, filterableOnly, disabled, onSelect(path)	The field chooser, in place of FieldPicker.
valueEditor	field, dataType, operator, value, arity, disabled, onChange(value)	Every value control in the editor.
entityEditor	the same arguments as the value editor	The two entity pickers alone.

Keyboard

key	does
Enter, Space	Opens the dialog from the launcher.
Tab	Cycles inside the dialog while it is open.
Escape	Closes the dialog and drops the staged edits.

API behaviour

Apply sends the tree through the same serialiser the editor shows: a tree whose rows are all blank applies as no filter, because a group with no conditions matches every row (030_complex_filters).