CataUiInputSearch

A searchable input component that displays filtered options based on user input. This component combines the functionality of a text input with dropdown selection, allowing users to either type their value or select from a list of options.

Basic Search

Search input

Selected value: None

With Minimum Characters (2) Required

Search with min chars

With Icon and Loading State

Search with loading state

<CataUiInputSearch 
  label="Search input"
  :options="options" 
  :minCharRequired="2"
  tooltip="Start typing to search" 
  v-model="myValue" />

Props

Prop	Description	Type	Default	Required	Options
error	Displays an error message below the input	String		false
icon	Icon to display within the input field	String		false
iconAlignment	Sets the alignment of the icon	String	'left'	false	'left', 'right'
label	The text label displayed above the input	String		false
loading	Shows a loading spinner and disables input	Boolean	false	false
minCharRequired	Minimum characters required to initiate search	Number	0	false
options	Array of selectable options to filter	Array		true
required	Displays a required indicator (*) next to the label	Boolean	false	false
tooltip	Tooltip text to display additional information	String		false

Model Value

Property	Description	Type	Required
v-model	Selected/typed value in the input	String	true

Events

Event	Description	Parameters
update:modelValue	Emitted when the selected value changes	(value: String) New value

Examples

Basic Usage

<CataUiInputSearch 
  label="Search input" 
  :options="options" 
  v-model="myValue" />

With Minimum Character Requirement

<CataUiInputSearch 
  label="Search input" 
  :options="options" 
  :minCharRequired="2"
  v-model="myValue" />

With Loading State and Icon

<CataUiInputSearch 
  label="Search input" 
  :options="options" 
  icon="search"
  :loading="isLoading" 
  v-model="myValue" />

Data structure

const myValue = ref('');
const isLoading = ref(false);
const options = ['Brief', 'Analytics', 'Toolbox', 'Visualize'];