BaseDropDown

Accessible drop down component

Props

Prop name	Description	Type	Values	Default
options	specify options to choose from needs to be an array with label and value properties	array	-	[]
label	label for the drop down, recommended to define for accessibility	string	-	'Drop Down'
placeholder	placeholder appearing in select when no option was selected	string	-	'Select'
modelValue	the selected value	object	-	{ value: '', label: '' }
showLabel	define if label should be shown	boolean	-	false
headerBackgroundColor	set the background color of drop down head	string	-	'inherit'
language	set a language (ISO 639-1)	string	-	''
valueProp	set the name of the property that holds the value	string	-	'value'
isDisabled	flag to set drop down inactive	boolean	-	false
withSpacing	flag to disable spacing left and right (needed for sidebar drop downs)	boolean	-	true
alignDropDown	align drop down with left or right border	string	left, right	'left'
id	set id if drop down with this label appears more than once	string|number	-	''

Events

Event name	Properties	Description
update:model-value	undefined Object - the selected option	Event emitted when an option is selected

Slots

Name	Description	Bindings
header-right	place elements right of header
default	create custom drop down body

---

Demo

Drop Down Single Style without label

Drop Down with label and with custom background color