Select

The select filter type allows choosing one item from a list. Useful for single-choice categories, sorting, etc. It supports inline, vertical, and popover layouts and can fetch options remotely from an API.

Component API

Prop	Type	Description
`type`	`'select'`	Must be set to `'select'`
`options`	`ListItem[]`	List of options with `{ value, label }` format
`label`	`string`	Label displayed on the field
`layout`	`'inline' \| 'vertical' \| 'popover'`	Layout style for rendering
`limit`	`number`	Max visible options in the dropdown
`apiUrl`	`string`	(optional) Endpoint for remote option loading
`setUp`	`object`	(optional) Config for remote loading: keys for label, value, search, etc.
`placeHolder`	`string`	(optional) Placeholder for search input inside popover

Examples

Inline Select Filter

Single-choice dropdown inside a compact area:

vue

<FilterField
  name="category"
  type="select"
  label="Category"
  layout="inline"
  :options="categoryOptions"
  v-model="selected"
/>

Vertical Select Filter

List-style select, good for sidebars or full filter panels:

vue

<FilterField
  name="category"
  type="select"
  label="Category"
  layout="vertical"
  :options="categoryOptions"
  v-model="selected"
/>

Colors and count

vue

[
{ id: 'cat_books', text: 'Books', color: 'red', count: 2 },
{ id: 'cat_movies', text: 'Movies' color: 'blur', count: 32},
{ id: 'cat_music', text: 'Music' color: 'green', count: 25},
{ id: 'cat_games', text: 'Games' color: 'black', count: 72},
{ id: 'cat_news', text: 'News' color: 'yellow', count: 13},
];

Remote Select Filter (via API)

vue

<FilterField
    name="category"
    type="select"
    label="Category"
    layout="popover"
    apiUrl="https://dummyjson.com/products/search"
    placeHolder="Search categories"
    v-model="selected"
    
/>

Select ​

Component API ​

Examples ​

Inline Select Filter ​

Vertical Select Filter ​

Popover Select Filter (with search) ​

Colors and count ​

Remote Select Filter (via API) ​