Select.md

Select

Select an item in a dropdown list. Use with Field to access all functionalities

Examples

Class props

Select component

Select an item in a dropdown list. Use with Field to access all functionalities

<o-select></o-select>

Props

Prop name	Description	Type	Values	Default
autocomplete	Same as native autocomplete options to use in HTML5 validation	string	-	From config: select: {   autocomplete: "off" }
customValidation			-	""
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: string | number | object | (string | number | object)[], state: ValidityState) => string)	-
disabled	Disable the input - same as native disabled	boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
icon	Icon to be shown	string	-	From config: select: {   icon: undefined }
iconClickable	Makes the icon clickable	boolean	-	false
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: select: {   iconPack: undefined }
iconRight	Icon to be added on the right side	string	-	From config: select: {   iconRight: undefined }
iconRightClickable	Make the icon right clickable	boolean	-	false
iconRightVariant	Variant of right icon	string	-
id	Same as native id. Also set the for label for o-field wrapper.	string	-	uuid()
v-model	The input value state	string | number | object | (string | number | object)[]	-	null
multiple	Allow multiple selection - converts the modelValue into an array	boolean	-
nativeSize	Same as native size	string | number	-
options	Select options, unnecessary when default slot is used	string[] | OptionsItem<string | number | object>[]	-
override	Override existing theme classes completely	boolean	-
placeholder	Text when nothing is selected	string	-
required	Same as native required	boolean	-	false
rounded	Makes the element rounded	boolean	-	false
size	Vertical size of input	string	small, medium, large	From config: select: {   size: undefined }
statusIcon	Show status icon using field and variant prop	boolean	-	From config: {   statusIcon: true }
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: select: {   variant: undefined }

Events

Event name	Properties	Description
update:modelValue	value string | number | boolean | object | array - updated modelValue prop	modelValue prop two-way binding
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event
icon-click	event Event - native event	on icon click event
icon-right-click	event Event - native event	on icon right click event

Slots

Name	Description	Bindings
placeholder	Override the placeholder
default	Override the options, default is options prop

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$select-background-color	#fff
$select-border-color	var(--#{$prefix}grey-lighter)
$select-border-style	solid
$select-border-width	1px
$select-border-radius	var(--#{$prefix}base-border-radius)
$select-rounded-border-radius	var( --#{$prefix}base-border-radius-rounded)
$select-box-shadow	$control-box-shadow
$select-color	#363636
$select-icon-zindex	4
$select-height	$control-height
$select-line-height	var(--#{$prefix}base-line-height)
$select-margin	0
$select-padding	$control-padding-vertical $control-padding-horizontal
$select-arrow-color	$select-color
$select-arrow-size	1rem
$select-placeholder-opacity	var(--#{$prefix}base-disabled-opacity)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.