CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedMigration
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ undefined Star🙏
  • undefined
  • undefined

Vue Select Component

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

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.falsestring-
feedback-invalid
4.3.0+
Provide valuable, actionable feedback.falsestring-
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.falsestring-
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.falsestring-
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.falsestring-
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.falsestring-
tooltip-feedback
4.3.0+
Display validation feedback in a styled tooltip.falseboolean-
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-model-valueEmit 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.

Code licensed MIT , docs CC BY 3.0 .