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. |