Skip to content

Select.md

Latest commit

 

History

History
122 lines (89 loc) · 8.89 KB

Select.md

File metadata and controls

122 lines (89 loc) · 8.89 KB

Select

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

Examples

Class props

Select component

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

<o-select></o-select>

Props

Prop name Description Type Values Default
autocomplete -
From config:
select: {
  autocomplete: "off"
}
customValidation - ""
disabled - false
expanded - false
icon -
From config:
select: {
  icon: undefined
}
iconClickable - false
iconPack -
From config:
select: {
  iconPack: undefined
}
iconRight -
From config:
select: {
  iconRight: undefined
}
iconRightClickable - false
iconRightVariant -
id - uuid()
v-model - null
nativeSize -
options -
override -
placeholder -
required - false
rounded - false
size -
From config:
select: {
  size: undefined
}
statusIcon -
From config:
{
  statusIcon: true
}
useHtml5Validation -
From config:
{
  useHtml5Validation: true
}
variant -
From config:
select: {
  variant: undefined
}

Events

Event name Properties Description
update:modelValue value string | number | boolean | object | array - updated modelValue prop modelValue prop two-way binding
focus event Event - native event on input focus event
blur event Event - native event on input blur event
invalid event Event - native event on input invalid event
icon-click event Event - native event on icon click event
icon-right-click event Event - native event on icon right click event

Slots

Name Description Bindings
placeholder Override the placeholder
default Override the options, default is options prop

Sass variables

Current theme ➜ Oruga

SASS Variable Default
$select-background-color #fff
$select-border-color var(--#{$prefix}grey-lighter)
$select-border-style solid
$select-border-width 1px
$select-border-radius var(--#{$prefix}base-border-radius)
$select-rounded-border-radius var( --#{$prefix}base-border-radius-rounded)
$select-box-shadow $control-box-shadow
$select-color #363636
$select-icon-zindex 4
$select-height $control-height
$select-line-height var(--#{$prefix}base-line-height)
$select-margin 0
$select-padding $control-padding-vertical $control-padding-horizontal
$select-arrow-color $select-color
$select-arrow-size 1rem
$select-placeholder-opacity var(--#{$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.