Vue Select Component

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

Default #

Open this select menuOneTwoThree

<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>

Sizing #

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

Open this select menuOneTwoThreeOpen this select menuOneTwoThree

<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>

The multiple attribute is also supported:

Open this select menuOneTwoThree

<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>

As is the html-size property:

Open this select menuOneTwoThree

<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>

Disabled #

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

Open this select menuOneTwoThree

<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>

API #

CFormSelect #

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

Props #

Prop name	Description	Type	Values	Default
feedback 4.3.0+	Provide valuable, actionable feedback.false	string	-
feedback-invalid 4.3.0+	Provide valuable, actionable feedback.false	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.false	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.false	string	-
html-size	Specifies the number of visible options in a drop-down list.	number	-	-
id	The id global attribute defines an identifier (ID) that must be unique in the whole document.	string	-
invalid	Set component validation state to invalid.	boolean	-
label 4.3.0+	Add a caption for a component.false	string	-
model-value	The default name for a value passed using v-model.	string | string[]	-	-
options	Options 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[]	-	-
size	Size the component small or large.	string	'sm' | 'lg'	-
text 4.3.0+	Add helper text to the component.false	string	-
tooltip-feedback 4.3.0+	Display validation feedback in a styled tooltip.false	boolean	-
valid	Set component validation state to valid.	boolean	-

Events #

Event name	Description	Properties
change	Event occurs when when a user changes the selected option of a <select> element.
update-model-value	Emit the new value whenever there’s a change event.