Skip to content
On this page

Select

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

Base

Something went wrong with this field

Class props


How does Class props inspector work?
Class propDescriptionPropsSuffixes
arrowClassClass of the select arrow.
👉 It applies the arrow icon using background-image and background-position on select element. An alternative to override it is iconRight prop (globally or not)
expandedClassClass of select when expanded.expanded
iconLeftClassClass of the left icon.icon
iconLeftSpaceClassClass of the left icon space inside the select.icon
iconRightClassClass of the right icon.iconRight
iconRightSpaceClassClass of the right icon space inside the select.iconRight
multipleClassClass of the select when multiple mode is active.multiple
placeholderClassClass of the select placeholder.
rootClassClass of the root element.
roundedClassClass of select when rounded.rounded
selectClassClass of the native select element.
sizeClassClass of the select size.sizesmall
medium
large
variantClassClass of the select variant.variantprimary
info
warning
danger


Props

Prop nameDescriptionTypeValuesDefault
autocompleteNative options to use in HTML5 validationstring-
expandedMakes input full width when inside a grouped or addon fieldboolean-
iconIcon name to be addedstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config

select: {
  iconPack: undefined
}
iconRightIcon name to be added on the right sidestring-
From config

select: {
  iconRight: undefined
}
maxlengthSame as native maxlength, plus character counternumber|string-
multipleboolean-
nativeSizeSame as native sizestring|number-
overrideboolean-
placeholderText when nothing is selectedstring-
roundedMakes the element roundedboolean-
sizeVertical size of input, optionalstringsmall, medium, large
statusIconShow status icon using field and variant propboolean-
From config

{
   "statusIcon": true
}
useHtml5ValidationEnable html 5 native validationboolean-
From config

{
   "useHtml5Validation": true
}
v-modelstring|number|boolean|object|array-null
validationMessageThe message which is shown when a validation error occursstring-
variantColor of the control, optionalstringprimary, info, success, warning, danger, and any other custom color

Events

Event namePropertiesDescription
blur
focus
update:modelValue

Slots

NameDescriptionBindings
default

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-select-background-color$select-background-color#fff
--oruga-select-border-color$select-border-color$grey-lighter
--oruga-select-border-width$select-border-width1px
--oruga-select-border-style$select-border-stylesolid
--oruga-select-border-radius$select-border-radius$base-border-radius
--oruga-select-rounded-border-radius$select-rounded-border-radius$base-rounded-border-radius
--oruga-select-box-shadow$select-box-shadownone
--oruga-select-color$select-color#363636
--oruga-select-icon-zindex$select-icon-zindex4
--oruga-select-height$select-height$control-height
--oruga-select-arrow-size$select-arrow-size1rem
--oruga-select-line-height$select-line-height$base-line-height
--oruga-select-margin$select-margin0
--oruga-select-max-width$select-max-width100%
--oruga-select-width$select-width100%
--oruga-select-placeholder-opacity$select-placeholder-opacity$base-disabled-opacity
--oruga-select-padding$select-padding$control-padding-vertical $control-padding-horizontal

Released under the MIT License.