# Select

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


edit on github

# Examples

# Base

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
arrowClass Class 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)
expandedClass Class of select when expanded. expanded
iconLeftClass Class of the left icon. icon
iconLeftSpaceClass Class of the left icon space inside the select. icon
iconRightClass Class of the right icon. iconRight
iconRightSpaceClass Class of the right icon space inside the select. iconRight
multipleClass Class of the select when multiple mode is active. multiple
placeholderClass Class of the select placeholder.
rootClass Class of the root element.
roundedClass Class of select when rounded. rounded
selectClass Class of the native select element.
sizeClass Class of the select size. size small
medium
large
variantClass Class of the select variant. variant primary
info
warning
danger


# Props

Prop name Description Type Values Default
autocomplete Native options to use in HTML5 validation string -
expanded Makes input full width when inside a grouped or addon field boolean -
icon Icon name to be added string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
From config

select: {
  iconPack: undefined
}
iconRight Icon name to be added on the right side string -
From config

select: {
  iconRight: undefined
}
maxlength Same as native maxlength, plus character counter number|string -
multiple boolean -
nativeSize Same as native size string|number -
override Override classes boolean - false
placeholder Text when nothing is selected string -
rounded Makes the element rounded boolean -
size Vertical size of input, optional string small, medium, large
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
}
v-model string|number|boolean|object|array - null
validationMessage The message which is shown when a validation error occurs string -
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color

# Events

Event name Properties Description
blur
focus
input

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-select-background-color $select-background-color #fff
--oruga-select-border-color $select-border-color $grey-lighter
--oruga-select-border-width $select-border-width 1px
--oruga-select-border-style $select-border-style solid
--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-shadow none
--oruga-select-color $select-color #363636
--oruga-select-icon-zindex $select-icon-zindex 4
--oruga-select-height $select-height $control-height
--oruga-select-arrow-size $select-arrow-size 1rem
--oruga-select-line-height $select-line-height $base-line-height
--oruga-select-margin $select-margin 0
--oruga-select-max-width $select-max-width 100%
--oruga-select-width $select-width 100%
--oruga-select-placeholder-opacity $select-placeholder-opacity $base-disabled-opacity
--oruga-select-padding $select-padding $control-padding-vertical $control-padding-horizontal