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>

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>

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>

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>

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>

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.

Vue Select Component

Default #

Sizing #

Disabled #

API #

CFormSelect #

Props #

Events #