Django Filter Component

Filter renders a group of radio buttons styled as toggle chips. Selecting one chip deselects the others — use it for tag filters, category selectors, or any mutually exclusive filter UI.

Basic Filter

Preview

Code

<c-lb.filter>
  <c-lb.filter.item name="frameworks" label="All" reset />
  <c-lb.filter.item name="frameworks" label="Svelte" />
  <c-lb.filter.item name="frameworks" label="Vue" />
  <c-lb.filter.item name="frameworks" label="React" />
</c-lb.filter>

Multi Select

Preview

Code

<c-lb.filter as="form" multiSelect>
  <c-lb.filter.item type="checkbox" name="toppings" label="Cheese" />
  <c-lb.filter.item type="checkbox" name="toppings" label="Pepperoni" />
  <c-lb.filter.item type="checkbox" name="toppings" label="Mushrooms" />
  <c-lb.filter.item type="checkbox" name="toppings" label="Olives" />
  <c-lb.filter.item type="reset" />
</c-lb.filter>

With Reset Button

Preview

Code

<c-lb.filter as="form">
  <c-lb.filter.item type="reset" />
  <c-lb.filter.item name="fw" label="Svelte" />
  <c-lb.filter.item name="fw" label="Vue" />
  <c-lb.filter.item name="fw" label="React" />
</c-lb.filter>

API Reference

`c-lb.filter`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
as	div form	`div`	No	HTML element to render as (form enables reset button)
multiSelect	boolean	`False`	No	Enable multi-select mode (removes filter class so multiple items can be selected)

Slot Name	Description
default	Filter items (radio/checkbox inputs with btn class)

`c-lb.filter.item`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
name	string	`filter`	No	Radio group name
label	string	-	Yes	Visible label text for the filter button (sets aria-label)
type	radio checkbox reset	`radio`	No	Input type
reset	boolean	`False`	No	Mark as the reset/clear-all button