CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

Vue Select Component

Vue select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

  • Angular Select
  • Bootstrap Select
  • React Select

Default #

<CFormSelect
  aria-label="Default select example"
  :options="[
    'Open this select menu',
    { label: 'One', value: '1' },
    { label: 'Two', value: '2' },
    { label: 'Three', value: '3', disabled: true }
  ]">
</CFormSelect>

// You can also add options manually
<CFormSelect aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" disabled>Three</option>
</CFormSelect>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Sizing #

You may also choose from small and large custom selects to match our similarly sized text inputs.

<CFormSelect size="lg" class="mb-3" aria-label="Large select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
<CFormSelect size="sm" class="mb-3" aria-label="Small select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6
7
8
9
10
11
12

The multiple attribute is also supported:

<CFormSelect size="lg" multiple aria-label="Multiple select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6

As is the html-size property:

<CFormSelect :html-size="3" multiple aria-label="size 3 select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6

Disabled #

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

<CFormSelect aria-label="Disabled select example" disabled>
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
1
2
3
4
5
6

API #

CFormSelect #

import { CFormSelect } from '@coreui/vue'
// or
import CFormSelect from '@coreui/vue/src/components/form/CFormSelect'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
feedback
4.3.0+
Provide valuable, actionable feedback.string-
feedback-invalid
4.3.0+
Provide valuable, actionable feedback.string-
feedback-valid
4.3.0+
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.string-
floating-label
4.3.0+
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.string-
html-sizeSpecifies the number of visible options in a drop-down list.number--
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.string-
invalidSet component validation state to invalid.boolean-
label
4.3.0+
Add a caption for a component.string-
model-valueThe default name for a value passed using v-model.string | string[]--
optionsOptions list of the select component. Available keys: label, value, disabled.
Examples:
- :options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"
- :options="['js', 'html']"
Option[] | string[]--
sizeSize the component small or large.string'sm' | 'lg'-
text
4.3.0+
Add helper text to the component.string-
tooltip-feedback
4.3.0+
Display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-

Events #

Event nameDescriptionProperties
changeEvent occurs when when a user changes the selected option of a <select> element.
update:modelValueEmit the new value whenever there’s a change event.
On this page
  • Default
  • Sizing
  • Disabled
  • API
    • CFormSelect
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.