Filter Panel

Filter panel component for faceted search and real-time filtering of data tables with collapsible sections.

Basic Filter Panel


          <.filter_panel id="product-filters">
            <:filter label="Category" field="category">
            </:filter>
            <:option field="category" value="electronics" label="Electronics" count={42} />
            <:option field="category" value="clothing" label="Clothing" count={28} />
            <:filter label="Price Range" field="price" type={:radio}>
            </:filter>
            <:option field="price" value="0-50" label="$0 - $50" />
          </.filter_panel>

Props

Prop	Type	Default	Description
id	string	-	Unique ID for the filter panel
title	string	"Filters"	Panel title
collapsible	boolean	true	Allow collapsing the panel
filter.type	:checkbox \| :radio \| :range	:checkbox	Filter input type

Filter Panel

Basic Filter Panel

Product Filters

Props