Skip to content

Select

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

Examples

Base

Show code

Variants

Show code

Class props

'Classes applied to the element'

Select component

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

html
<o-select></o-select>

Props

Prop nameDescriptionTypeValuesDefault
autocompleteSame as native autocomplete options to use in HTML5 validationstring-
From config:
select: {
  autocomplete: "off"
}
disabledSame as native disabledboolean-false
expandedMakes input full width when inside a grouped or addon fieldboolean-false
iconIcon to be shownstring-
From config:
select: {
  icon: undefined
}
iconClickableMakes the icon clickableboolean-false
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
select: {
  iconPack: undefined
}
iconRightIcon to be added on the right sidestring-
From config:
select: {
  iconRight: undefined
}
iconRightClickableMake the icon right clickableboolean-false
iconRightVariantVariant of right iconstring-
idSame as native id. Also set the for label for o-field wrapper.string-Default function (see source code)
multipleAllow multiple selectionboolean-false
nativeSizeSame as native sizestring|number-
optionsSelect options, unnecessary when default slot is usedstring[] | OptionsItem[]-
overrideOverride existing theme classes completelyboolean-
placeholderText when nothing is selectedstring-
roundedMakes the element roundedboolean-false
sizeVertical size of inputstringsmall, medium, large
From config:
select: {
  size: undefined
}
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 controlstringprimary, info, success, warning, danger, and any other custom color
From config:
select: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:modelValuevalue string | number | boolean | object | Array&lt;any&gt; - updated modelValue propmodelValue prop two-way binding
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event
icon-clickevent Event - native eventon icon click event
icon-right-clickevent Event - native eventon icon right click event

Slots

NameDescriptionBindings
placeholderOverride the placeholder
defaultOverride the options, default is options prop

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$select-background-color#fff
$select-border-color$grey-lighter
$select-border-width1px
$select-border-stylesolid
$select-border-radius$base-border-radius
$select-rounded-border-radius$base-rounded-border-radius
$select-box-shadownone
$select-color#363636
$select-icon-zindex4
$select-height$control-height
$select-arrow-size1rem
$select-line-height$base-line-height
$select-margin0
$select-max-width100%
$select-width100%
$select-placeholder-opacity$base-disabled-opacity
$select-padding$control-padding-vertical $control-padding-horizontal

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$select-background-color#fff
$select-border-color$grey-lighter
$select-border-width1px
$select-border-stylesolid
$select-border-radius$base-border-radius
$select-rounded-border-radius$base-rounded-border-radius
$select-box-shadownone
$select-color#363636
$select-icon-zindex4
$select-height$control-height
$select-arrow-size1rem
$select-line-height$base-line-height
$select-margin0
$select-max-width100%
$select-width100%
$select-placeholder-opacity$base-disabled-opacity
$select-padding$control-padding-vertical $control-padding-horizontal

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.

Released under the MIT License.