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.