FilterBar

Implemented Blocks

Composable GET search form for server-owned filters and actions.

A wdj composition built from the existing component library.

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Search resources

Show template

{% load wdj %}
{% wdj_component "wdj/components/filter_bar.html" action="/resources/" label="Search demo resources" %}
  <div class="min-w-0 flex-1">
    {% include "wdj/components/input.html" with name="q" id="block-search" label="Search" type="search" placeholder="Resource name" only %}
  </div>
  {% include "wdj/components/button.html" with label="Search resources" type="submit" variant="primary" only %}
{% endwdj_component %}

Search and region

Show template

{% load wdj %}
{% wdj_component "wdj/components/filter_bar.html" action="/resources/" label="Filter demo resources" %}
  <div class="min-w-0 flex-1">{% include "wdj/components/input.html" with name="q" id="block-search-region" label="Search" type="search" only %}</div>
  <div class="w-full sm:w-44">{% include "wdj/components/select.html" with name="region" id="block-region" label="Region" options=regions only %}</div>
  {% include "wdj/components/button.html" with label="Apply filters" type="submit" variant="primary" only %}
  {% include "wdj/components/button.html" with label="Reset filters" href="/resources/" only %}
{% endwdj_component %}

HTMX catalog search

Show template

{% load wdj %}
{% wdj_component "wdj/components/filter_bar.html" action="/components/" label="Filter component catalog" attrs=block_filter_attrs %}
  <div class="min-w-0 flex-1">{% include "wdj/components/input.html" with name="q" id="block-catalog-search" label="Component name" type="search" only %}</div>
  {% include "wdj/components/button.html" with label="Search catalog" type="submit" variant="primary" only %}
{% endwdj_component %}
<div id="block-filter-results" aria-live="polite" class="mt-3"><p class="text-base text-kumo-subtle">Submit a search to load real catalog results.</p></div>

API Reference

Prop	Type	Default	Description
action	string / HTML slot	unset	Action; pass the documented value shown in the examples.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract