Select
Select an item in a dropdown list. Use with Field to access all functionalities
Examples
Base
Something went wrong with this field
Show code
Grouped
Selected:
Show code
Multiple
Selected: []
Show code
Sizes
Show code
Variants
Show code
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| arrowClass | Class of the select arrow. 👉 It applies the arrow icon using background-image and background-position on select element. An alternative to override it is iconRight prop (globally or not) | |||
| disabledClass | Class of select when disabled . | disabled | ||
| expandedClass | Class of select when expanded. | expanded | ||
| iconLeftClass | Class of the left icon. | icon | ||
| iconLeftSpaceClass | Class of the left icon space inside the select. | icon | ||
| iconRightClass | Class of the right icon. | iconRight | ||
| iconRightSpaceClass | Class of the right icon space inside the select. | iconRight | ||
| multipleClass | Class of the select when multiple mode is active. | multiple | ||
| placeholderClass | Class of the select placeholder. | |||
| rootClass | Class of the root element. | |||
| roundedClass | Class of select when rounded. | rounded | ||
| selectClass | Class of the native select element. | |||
| sizeClass | Class of the select size. | size | small | |
| variantClass | Class of the select variant. | variant | primary |
Select component
Select an item in a dropdown list. Use with Field to access all functionalities
html
<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: { |
| disabled | Disable the input - same as native disabled | boolean | - | false |
| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false |
| icon | Icon to be shown | string | - | From config: select: { |
| 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: { |
| iconRight | Icon to be added on the right side | string | - | From config: select: { |
| 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. | string | - | uuid() |
| v-model | The input value state | string | number | object | (string | number | object)[] | - | null |
| multiple | Allow multiple selection - converts the modelValue into an array | boolean | - | |
| nativeSize | Same as native size | string | number | - | |
| options | Select options, unnecessary when default slot is used | string[] | OptionsItem<string | number | object>[] | - | |
| 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: { |
| statusIcon | Show status icon using field and variant prop | boolean | - | From config: { |
| useHtml5Validation | Enable html 5 native validation | boolean | - | From config: { |
| validationMessage | The message which is shown when a validation error occurs | string | - | |
| variant | Color of the control | string | primary, info, success, warning, danger, and any other custom color | From config: select: { |
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.