Text

The text filter type is used for keyword search or freeform input. It supports both inline (compact with clear button inside input) and vertical (stacked layout) modes.

Component API

Prop	Type	Description
type	'text'	Must be set to 'text'
placeholder	string	Placeholder inside the input
label	string	Label displayed next to or above input
layout	'inline' | 'vertical'	Display style of the field
width	number	Field Width

interface

interface Props {  
  type: string; // filterType
  placeholder?: string;
  label: string; 
}

interface Emits {
  (e: "update:modelValue", value: any): void;
  (e: "change", value: { name: string; value: any }): void;
  (e: "clear", name: string): void;
}

interface Slots {
   default?: (scope:{ row: object }) => VNode[]; 
}

Inline

Compact and aligned with other toolbar filters.

<filter-field
  name="search"
  type="text"
  layout="inline"
  label="Search"
  placeHolder="Search by keyword"
  v-model="searchQuery"
/>

{}

Vertical

Stacked in a sidebar or column layout.

<filter-field
  name="search"
  type="text"
  layout="vertical"
  label="Search"
  placeHolder="Search by keyword"
  v-model="searchQuery"
/>

Search

{}