VC UI Library

Dropdown Option

Option Element of the dropdown

Expand

Dropdown Option Attributes

Attribute	Description	Type	Accepted Values	Default
value	The value that be passed on click event	String/Number	-	-
label	Text to be shown	String	-	No label provided
icon	Icon next to label	String - icon classname	-	-
disabled	If option is disabled	Boolean	-	false
active	If option is active	Boolean	-	false
iconColorHex	Color of icon	String	-

Dropdown Option Slots

Name	Description
default	Content of the option

Dropdown Option Events

Method	Description	Parameters
click	Option click event in case not disabled	Passed value prop

Basic usage with lazy-loading:

Expand

Clearable:

Expand

Not Required

Expand

Disabled Select

Expand

Error state

Expand

With Placeholder

Expand

Automatic tooltip change (open select and scroll the window)

Expand

Default Selected

Expand

Readonly with Icon

Expand

Basic usage with slot before arrow

Expand

Disabled Option

Option can be disabled if disabledKey passed in confid and option has such property with value true

Expand

With custom options content

Option can have custom content

Expand

Multiply Searched options:

Expand

Dropdown Slots

Dropdown Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	any	—
max-length	the maximum allowed length of value	number	-	Infinity
required	adding (*) to label	boolean	—	false
disabled	whether the component is disabled	boolean	—	false
label	label text	string	-	-
readonly	an input field is read only	boolean	-	false
label-icon	label icon	string	-	-
max-width	max-width	string	-
placeholder	placeholder	string	-	-
clearable	clearable input	boolean	-	false
prefix-icon	prefix icon	string	—	-
noDataText	no options provided text	string	-	No Data
prefix-icon-color	color of prefix icon	string	—	-
options	default options list if it is not lazy load	array	-	-
config	config: { labelKey: String, valueKey: String, iconKey: String, onclickFuncKey: String, iconColorHex: String, searchKey: String, disabledKey: String }	object	-	-
lazyLoadConfig	lazyLoadConfig: { getDataFunc: (page: number, filter: string): Object => {}, getDataFuncDataPath: '$.Data', getDataFuncPaginationTotalPath: '$.Pagination.Total' },	object	-	-

Dropdown Events

Method	Description	Parameters
update:modelValue	Triggers when update modelValue
clear	triggers by clear input
onblur	triggers when Input blured
onfocus	triggers when Input focused
onchange	triggers when Input changed
option-select	Option click event in case not disabled	Value if configured, option if not