Select.md

Select

The Select input component uses HTML's native select input. Select inputs can be single value selections, or multi-value selections by using the multiple attribute. Use it with the Field component to access all the functionalities.

Examples

Select Component

Select an item in a 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" }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: unknown, 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	-	From config: select: {   expanded: 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 - default is an uuid.	string	-	useId()
v-model	The input value state	unknown	-
multiple	Allow multiple selection - converts the modelValue into an array	boolean	-
nativeSize	Same as native size	Numberish	-
options	Select options, unnecessary when default slot is used	SelectOptions<unknown>	-
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 variant 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:model-value	value unknown | unknown[] - 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	Define the select options here, default is options prop

Class Inspector

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$select-height	h.useVar("control-height")
$select-padding	h.useVar("control-padding-vertical") h.useVar("control-padding-horizontal")
$select-disabled-opacity	h.useVar("control-disabled-opacity")
$select-color	h.useVar("font-color")
$select-font-size	h.useVar("font-size")
$select-font-weight	h.useVar("font-weight")
$select-line-height	h.useVar("line-height")
$select-box-shadow	h.useVar("control-box-shadow-inset")
$select-background-color	h.useVar("control-brackground-color")
$select-border-color	h.useVar("control-border-color")
$select-border-style	solid
$select-border-width	h.useVar("control-border-width")
$select-border-radius	h.useVar("border-radius")
$select-border-radius-rounded	h.useVar("border-radius-rounded")
$select-multiple-padding	h.useVar("control-spacer")
$select-arrow-color	vars.$font-color
$select-arrow-size	1em

See ➜ 📄 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.