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.