Skip to content

Select

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

## Examples

Base

Show code

Grouped

Show code

Multiple

Show code

Sizes

Show code

Variants

Show code

With Icons

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"
}
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: unknown, state: ValidityState) => string)-
disabledDisable the input - same 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 - default is an uuid.string-useId()
v-modelThe input value stateunknown-
multipleAllow multiple selection - converts the modelValue into an arrayboolean-
nativeSizeSame as native sizenumber | string-
optionsSelect options, unnecessary when default slot is usedOptionsPropWithGroups<unknown>-
overrideOverride existing theme classes completelyboolean-
placeholderText when nothing is selectedstring-
requiredSame as native requiredboolean-false
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
}
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
select: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:model-valuevalue T | T[] - 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

SASS VariableDefault
$select-background-color#fff
$select-border-colorvar(--#{$prefix}grey-lighter)
$select-border-stylesolid
$select-border-width1px
$select-border-radiusvar(--#{$prefix}base-border-radius)
$select-rounded-border-radiusvar( --#{$prefix}base-border-radius-rounded)
$select-box-shadow$control-box-shadow
$select-color#363636
$select-icon-zindex4
$select-height$control-height
$select-line-heightvar(--#{$prefix}base-line-height)
$select-margin0
$select-padding$control-padding-vertical $control-padding-horizontal
$select-arrow-color$select-color
$select-arrow-size1rem
$select-placeholder-opacityvar(--#{$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.

Released under the MIT License.