C&C Docs
Log in

cnc-filter

Every filter type from one element: set type to string, boolean, int, or date and the widget brings the control, the query encoding it emits, and the pill wrapped around it. Renders as a pill with a dropdown (horizontal) or inline under a label (vertical). The typed cnc-filter-* elements this replaced are archived (#609).

Quick start

Give the filter a label and a type. String filters take their choices through $options. Every change emits filter-change carrying the encoded value and the selected count that drives the pill badge.

(no filter) 
<div x-data="{ status: '' }">
  <cnc-filter
    label="Status"
    type="string"
    $options='[{"text":"Active","value":"active"},{"text":"Pending","value":"pending"}]'
    @filter-change="status = $event.detail.value"
  ></cnc-filter>
</div>

Wire format

Each type encodes into the query shape a consumer filters on. The value is always a JSON string, or empty when nothing is active — never an empty _in.

Type Control Emitted value
string Checkbox list { "_in":["active","pending"]}
boolean Tri-state checkbox list { "_in":[true]} or { "_nin":[false]}
int Min / Max numbers { "_gte":3,"_lte":9}
date (daterange) From / To dates { "_gte":"2026-01-01","_lte":"2026-02-01"}
date (single) From date only "2026-01-01"

Usage guidance

Use horizontal pills above a table or list, where filters should stay compact and read as one row of narrowing choices; use vertical in a sidebar, where the open controls double as a summary of what is filtered. Pair a bar of filters with cnc-filter-view to show the active set as removable tags. The typed cnc-filter-string, -boolean, -int, and -date elements are archived — reach for type instead.

← Back to Widgets