Filter Bar

Configuration component

<loquix-filter-bar> is a horizontal row of chips the user toggles on and off — styles, formats, scopes, whatever narrows a generation. It can also carry a negative prompt field for saying what to leave out.

loquix-filter-barmulti-select chipsoptional negative prompt

Preview

Filters with a negative prompt Live component

Two chips active, and a negative prompt listing what to avoid.

Usage

import '@loquix/core/define/define-filter-bar';

const bar = document.querySelector('loquix-filter-bar');

bar.filters = [
  { id: 'photo', label: 'Photographic', icon: '📷', group: 'Style' },
  { id: 'wide', label: 'Widescreen', icon: '🖥️', group: 'Format' },
];

bar.addEventListener('loquix-filter-change', (event) => {
  const { values, negativePrompt } = event.detail;

  applyFilters(values, negativePrompt);
});

One event covers both halves — toggling a chip and editing the negative prompt each fire loquix-filter-change with the current state of both.

The filter object

Field	Type	Required	Description
id	string	yes	Identifier, the value that appears in values.
label	string	yes	Chip text.
icon	string	no	Icon or emoji before the label.
group	string	no	Group name, used to cluster chips visually.

Selection is multiple, and yours to constrain

Toggling a chip updates values for you, so the chip states are handled. But filters are independent — if only one in a group should be active at a time, enforce that in your loquix-filter-change handler.

Properties

Property	Attribute	Type	Default	Description
filters	filters	FilterOption[]	[]	Available filters.
values	values	string[]	[]	Ids of the active filters. Updated by the component as chips are toggled.
showNegativePrompt	show-negative-prompt	boolean	false	Shows the negative prompt field.
negativePrompt	negative-prompt	string	''	Negative prompt text.
disabled	disabled	boolean	false	Disables every control.

Events

Event	Detail	Description
loquix-filter-change	{ values, negativePrompt? }	Fired when a chip is toggled or the negative prompt changes.

CSS parts

Part	Purpose
bar	The chip container.
filter	A single filter chip.
negative-prompt	The negative prompt section.