Select
A dropdown menu similar to the HTML <select> element. Options are provided as an array of MenuOption types, and v-model is used to bind the current selection's value.
Demos
Basic Usage
Options must have a value, and can have a label to display in the UI. If no label is provided (like the third option in this example), the value will be displayed.
<template>
<cdx-select
v-model="selection"
:options="options"
default-label="Choose an option"
/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { CdxSelect } from 'vue-components/src/lib';
export default defineComponent( {
name: 'BasicSelect',
components: { CdxSelect },
data() {
return {
options: [
{ label: 'Option A', value: 'a' },
{ label: 'Option B', value: 'b' },
{ value: 'c' },
{ label: 'Option D', value: 'd', disabled: true }
],
selection: null
};
}
} );
</script>
With custom label display
The label scoped slot enables you to customize the display of the label, with bindings for the selectedOption and the defaultLabel.
<template>
<cdx-select
v-model="selection"
:options="options"
default-label="Choose an option"
>
<template #label="{ selectedOption, defaultLabel }">
<span v-if="selectedOption">
<span>You have selected: {{ selectedOption.label }}</span>
</span>
<span v-else>
{{ defaultLabel }}
</span>
</template>
</cdx-select>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { CdxSelect } from 'vue-components/src/lib';
export default defineComponent( {
name: 'SelectCustomLabel',
components: { CdxSelect },
data() {
return {
options: [
{ label: 'Option A', value: 'a' },
{ label: 'Option B', value: 'b' },
{ label: 'Option C', value: 'c' },
{ label: 'Option D', value: 'd', disabled: true }
],
selection: null
};
}
} );
</script>
With custom option display
The menu-option scoped slot enables you to customize the display of each option, with a binding for the option.
<template>
<cdx-select
v-model="selection"
class="vp-select-custom-option"
:options="options"
default-label="Choose an option"
>
<template #menu-option="{ option }">
<cdx-icon v-if="option.icon" :icon="option.icon" />
<span>{{ option.label }}</span>
</template>
</cdx-select>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { CdxSelect, CdxIcon } from 'vue-components/src/lib';
import { cdxIconGlobe, cdxIconStar, cdxIconHieroglyph, cdxIconCamera } from 'icons';
export default defineComponent( {
name: 'SelectCustomOption',
components: { CdxSelect, CdxIcon },
data() {
return {
options: [
{ label: 'Option A', value: 'a', icon: cdxIconGlobe },
{ label: 'Option B', value: 'b', icon: cdxIconStar },
{ label: 'Option C', value: 'c', icon: cdxIconHieroglyph },
{ label: 'Option D', value: 'd', icon: cdxIconCamera, disabled: true }
],
selection: null
};
}
} );
</script>
<style scoped>
.vp-select-custom-option .cdx-icon {
margin-right: 0.5em;
}
</style>
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|
| options | Menu options. See the MenuOption type. | MenuOption[] | - | |
| modelValue | Value provided by v-model binding in the parent component. | string|number|null | - | null |
| defaultLabel | Label to display when no selection has been made. | string | - | '' |
| disabled | Whether the dropdown is disabled. | boolean | - | false |
Events
| Event name | Properties | Description |
|---|
| update:modelValue | value string | number - The new value | When the selection value changes. |
Slots
| Name | Description | Bindings |
|---|
| label | Display of the current selection or default label | selectedOption MenuOption, undefined - The currently selected option
defaultLabel string - The default label, provided via a prop |
| menu-option | Display of an individual option in the menu | option MenuOption - The current option |