Vue Select Box - Overview

The SelectBox component allows users to select an item from a drop-down list.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the SelectBox features used.

Backend API

<template> <div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <DxSelectBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Simple Product' }" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">With a custom placeholder</div> <div class="dx-field-value"> <DxSelectBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Product With Placeholder' }" :show-clear-button="true" placeholder="Choose Product" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Read only</div> <div class="dx-field-value"> <DxSelectBox :items="simpleProducts" :input-attr="{ 'aria-label': 'ReadOnly Product' }" :value="simpleProducts[0]" :read-only="true" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <DxSelectBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Disabled Product' }" :value="simpleProducts[0]" :disabled="true" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source usage</div> <div class="dx-field-value"> <DxSelectBox :data-source="data" :input-attr="{ 'aria-label': 'Product ID' }" :value="products[0].ID" display-expr="Name" value-expr="ID" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom templates</div> <div class="dx-field-value"> <DxSelectBox id="custom-templates" :data-source="products" :value="products[3].ID" :input-attr="{ 'aria-label': 'Templated Product' }" display-expr="Name" value-expr="ID" :field-addons="{ beforeTemplate: 'before' }" item-template="item" > <template #before="{ data }"> <Field :field-data="data"/> </template> <template #item="{ data }"> <Item :item-data="data"/> </template> </DxSelectBox> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Event Handling</div> <div class="dx-field"> <div class="dx-field-label">Product</div> <div class="dx-field-value"> <DxSelectBox :items="simpleProducts" :input-attr="{ 'aria-label': 'Product' }" v-model:value="value" @value-changed="onValueChanged" /> </div> </div> <div class="current-value"> Selected product is <span>{{ value }}</span> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box'; import { ArrayStore } from 'devextreme-vue/common/data'; import notify from 'devextreme/ui/notify'; import Field from './Field.vue'; import Item from './Item.vue'; import service from './data.ts'; const products = service.getProducts(); const simpleProducts = service.getSimpleProducts(); const value = ref(simpleProducts[0]); const data = new ArrayStore({ data: products, key: 'ID', }); function onValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) { notify(`The value is changed to: "${e.value}"`); } </script> <style> .dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { padding-left: 7px; padding-right: 7px; } .custom-item { position: relative; min-height: 30px; } .custom-addon { padding-left: 8px; display: flex; align-items: center; } .dx-dropdowneditor-input-wrapper .custom-item > img { padding-left: 8px; } .custom-item .product-name { display: inline-block; padding-left: 50px; text-indent: 0; line-height: 30px; font-size: 15px; width: 100%; } .custom-item > img { left: 1px; position: absolute; top: 50%; margin-top: -15px; } .dx-theme-material #custom-templates .dx-texteditor-buttons-container { display: none; } .current-value { padding: 10px 0; } .current-value > span { font-weight: bold; } .dx-theme-material .dx-selectbox-container .product-name { padding-left: 58px; } </style>

<template> <div class="custom-addon"> <img v-if="fieldData" alt="Product name" :src="fieldData.ImageSrc" > </div> </template> <script setup lang="ts"> import DxTextBox from 'devextreme-vue/text-box'; withDefaults(defineProps<{ fieldData?: Record<string, any> }>(), { fieldData: () => ({} as Record<string, any>), }); </script>

<template> <div class="custom-item"> <img alt="Product name" :src="itemData.ImageSrc" > <div class="product-name"> {{ itemData.Name }} </div> </div> </template> <script setup lang="ts"> withDefaults(defineProps<{ itemData?: Record<string, any> }>(), { itemData: () => ({} as Record<string, any>), }); </script>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

This demo illustrates the following SelectBox properties:

items
Specifies an array of items displayed in the SelectBox.
placeholder
Specifies the text that is displayed when no items are selected.
readOnly
Prevents users from changing the editor's value via the UI.
disabled
Specifies whether the SelectBox responds to user interaction.
dataSource
Binds the SelectBox to data. Unlike the items property, dataSource accepts the DataSource object that allows users to sort, filter, group, and shape data.
fieldAddons.beforeTemplate and itemTemplate
Allow you to customize the text field and drop-down list items.
onValueChanged event handler
Use this function to perform an action when a user chooses a new value. In this demo, this function is used to display the selected value.

To get started with the DevExtreme SelectBox component, refer to the following tutorial for step-by-step instructions: Getting Started with SelectBox.