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
## 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: { |
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 | - | 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 - 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 | number | string | - | |
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: { |
statusIcon | Show status icon using field and variant prop | boolean | - | From config: { |
useHtml5Validation | Enable HTML 5 native validation | boolean | - | From config: { |
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:model-value | value T | T[] - 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.