CnFilterBar

Search and filter controls row for list views. Renders a text search input, zero or more typed filter controls (select, text, checkbox), and an optional "Clear filters" button.

Wraps: NcTextField, NcSelect, NcButton, NcCheckboxRadioSwitch

Try it

Loading CnFilterBar playground…

Anatomy

+------------------------------------------------------------+
|  [🔍 Search...]  |  [All types ▾]  |  [✓ Active only]  |  [Clear filters]
+------------------------------------------------------------+
        ↑                   ↑                  ↑                     ↑
   search input         select filter     checkbox filter        clear all

Region	Description
Search input	Free-text search; emits search on every keystroke. Shows a clear (×) button while text is entered
Filter controls	One control per entry in :filters. Type select renders NcSelect, text renders NcTextField, checkbox renders NcCheckboxRadioSwitch
Clear filters	Appears when any filter or the search term is non-empty (when showClearAll is true); emits clear-all

Usage

<CnFilterBar
  :search-value="searchTerm"
  search-placeholder="Search clients..."
  :filters="[
    { key: 'type', label: 'All types', type: 'select', options: typeOptions, value: selectedType },
    { key: 'active', label: 'Active only', type: 'checkbox', value: showActiveOnly },
  ]"
  @search="onSearch"
  @filter-change="onFilterChange"
  @clear-all="clearFilters" />

Props

Prop	Type	Default	Description
filters	Array	[]	Filter definitions for embedded filter controls: [{ key, label, type, options?, value? }]. Filter types: 'select', 'text', 'checkbox'
searchValue	String	''	Current search term (controlled)
searchPlaceholder	String	'Search...'	Placeholder text for the search input
showClearAll	Boolean	true	Show a "Clear filters" button when any filter is active
clearAllLabel	String	'Clear filters'	Label for the clear-all button

Events

Event	Payload	Description
search	term	Emitted when the search input value changes
filter-change	{ key, value }	Emitted when any filter value changes; includes the filter key and new value
clear-all	—	Emitted when the clear-all button is clicked

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnFilterBar.vue and update automatically whenever the component changes.

Props

| Name | Type | Required | Default | Description | | ------------------- | -------------------------------------------------- | -------- | ---------------------------------------------- | -------------------------------------- | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | filters | Array<{key: string, label: string, type: 'select' | 'text' | 'checkbox', options: Array, value: any}> | | [] | Filter definitions. Each item has key, label, type ('select'|'text'|'checkbox'), optional options (for select), and optional value. | | searchValue | string | | '' | Current search text | | searchPlaceholder | string | | () => t('nextcloud-vue', 'Search...') | Search input placeholder text | | showClearAll | boolean | | true | Whether to show the "Clear all" button | | clearAllLabel | string | | () => t('nextcloud-vue', 'Clear filters') | Clear all button label |

Events

Name	Payload	Description
search	—
clear-all	—
filter-change	—	Emitted when any filter changes.