Skip to content

Select.md

Latest commit

 

History

History
128 lines (94 loc) · 14.4 KB

Select.md

File metadata and controls

128 lines (94 loc) · 14.4 KB

Select

The Select input component uses HTML's native select input. Select inputs can be single value selections, or multi-value selections by using the multiple attribute. Use it with the Field component to access all the functionalities.

Examples

Select Component

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

<o-select></o-select>

Props

Prop name Description Type Values Default
autocomplete Same as native autocomplete options to use in HTML5 validation string -
From config:
select: {
  autocomplete: "off"
}
customValidity Custom HTML 5 validation error to set on the form control string | ((currentValue: unknown, state: ValidityState) => string) -
disabled Disable the input - same as native disabled boolean - false
expanded Makes input full width when inside a grouped or addon field boolean -
From config:
select: {
  expanded: false
}
icon Icon to be shown string -
From config:
select: {
  icon: undefined
}
iconClickable Makes the icon clickable boolean - false
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
From config:
select: {
  iconPack: undefined
}
iconRight Icon to be added on the right side string -
From config:
select: {
  iconRight: undefined
}
iconRightClickable Make the icon right clickable boolean - false
iconRightVariant Variant of right icon string -
id Same as native id. Also set the for label for o-field wrapper - default is an uuid. string - useId()
v-model The input value state unknown -
multiple Allow multiple selection - converts the modelValue into an array boolean -
nativeSize Same as native size Numberish -
options Select options, unnecessary when default slot is used OptionsPropWithGroups<unknown> -
override Override existing theme classes completely boolean -
placeholder Text when nothing is selected string -
required Same as native required boolean - false
rounded Makes the element rounded boolean - false
size Vertical size of input string small, medium, large
From config:
select: {
  size: undefined
}
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
}
variant Color variant of the control string primary, info, success, warning, danger, and any other custom color
From config:
select: {
  variant: undefined
}

Events

Event name Properties Description
update:model-value value unknown | unknown[] - 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

Class Inspector

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 ➜ 📄 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.