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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box'; import ArrayStore from 'devextreme/data/array_store'; import notify from 'devextreme/ui/notify'; import service from './data.ts'; import Field from './Field.tsx'; import Item from './Item.tsx'; const simpleProductLabel = { 'aria-label': 'Simple Product' }; const productIDLabel = { 'aria-label': 'Product ID' }; const productWithPlaceholderLabel = { 'aria-label': 'Product With Placeholder' }; const productLabel = { 'aria-label': 'Product' }; const readOnlyProductLabel = { 'aria-label': 'ReadOnly Product' }; const templatedProductLabel = { 'aria-label': 'Templated Product' }; const disabledProductLabel = { 'aria-label': 'Disabled Product' }; const products = service.getProducts(); const simpleProducts = service.getSimpleProducts(); const data = new ArrayStore({ data: products, key: 'ID', }); function App() { const [value, setValue] = useState(service.getSimpleProducts()[0]); const onValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { setValue(e.value); notify(`The value is changed to: "${e.value}"`); }, []); return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Default mode</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} inputAttr={simpleProductLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">With a custom placeholder</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} placeholder="Choose Product" inputAttr={productWithPlaceholderLabel} showClearButton={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Read only</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} defaultValue={simpleProducts[0]} inputAttr={readOnlyProductLabel} readOnly={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disabled</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} inputAttr={disabledProductLabel} defaultValue={simpleProducts[0]} disabled={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Data source usage</div> <div className="dx-field-value"> <SelectBox dataSource={data} displayExpr="Name" inputAttr={productIDLabel} valueExpr="ID" defaultValue={products[0].ID} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom templates</div> <div className="dx-field-value"> <SelectBox id="custom-templates" dataSource={products} displayExpr="Name" inputAttr={templatedProductLabel} valueExpr="ID" defaultValue={products[3].ID} fieldRender={Field} itemRender={Item} /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Event Handling</div> <div className="dx-field"> <div className="dx-field-label">Product</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} value={value} inputAttr={productLabel} onValueChanged={onValueChanged} /> </div> </div> <div className="current-value"> Selected product is <span>{value}</span> </div> </div> </div> ); } export default App;

import React, { useCallback, useState } from 'react'; import SelectBox from 'devextreme-react/select-box'; import ArrayStore from 'devextreme/data/array_store'; import notify from 'devextreme/ui/notify'; import service from './data.js'; import Field from './Field.js'; import Item from './Item.js'; const simpleProductLabel = { 'aria-label': 'Simple Product' }; const productIDLabel = { 'aria-label': 'Product ID' }; const productWithPlaceholderLabel = { 'aria-label': 'Product With Placeholder' }; const productLabel = { 'aria-label': 'Product' }; const readOnlyProductLabel = { 'aria-label': 'ReadOnly Product' }; const templatedProductLabel = { 'aria-label': 'Templated Product' }; const disabledProductLabel = { 'aria-label': 'Disabled Product' }; const products = service.getProducts(); const simpleProducts = service.getSimpleProducts(); const data = new ArrayStore({ data: products, key: 'ID', }); function App() { const [value, setValue] = useState(service.getSimpleProducts()[0]); const onValueChanged = useCallback((e) => { setValue(e.value); notify(`The value is changed to: "${e.value}"`); }, []); return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Default mode</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} inputAttr={simpleProductLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">With a custom placeholder</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} placeholder="Choose Product" inputAttr={productWithPlaceholderLabel} showClearButton={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Read only</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} defaultValue={simpleProducts[0]} inputAttr={readOnlyProductLabel} readOnly={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disabled</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} inputAttr={disabledProductLabel} defaultValue={simpleProducts[0]} disabled={true} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Data source usage</div> <div className="dx-field-value"> <SelectBox dataSource={data} displayExpr="Name" inputAttr={productIDLabel} valueExpr="ID" defaultValue={products[0].ID} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom templates</div> <div className="dx-field-value"> <SelectBox id="custom-templates" dataSource={products} displayExpr="Name" inputAttr={templatedProductLabel} valueExpr="ID" defaultValue={products[3].ID} fieldRender={Field} itemRender={Item} /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Event Handling</div> <div className="dx-field"> <div className="dx-field-label">Product</div> <div className="dx-field-value"> <SelectBox items={simpleProducts} value={value} inputAttr={productLabel} onValueChanged={onValueChanged} /> </div> </div> <div className="current-value"> Selected product is <span>{value}</span> </div> </div> </div> ); } export default App;

import React from 'react'; import TextBox from 'devextreme-react/text-box'; const nameLabel = { 'aria-label': 'Name' }; export default function Field(data: { ImageSrc: any; Name: any }) { return ( <div className="custom-item"> <img alt="Product name" src={data && data.ImageSrc} /> <TextBox className="product-name" inputAttr={nameLabel} defaultValue={data && data.Name} readOnly={true} /> </div> ); }

import React from 'react'; export default function Item(data) { return ( <div className="custom-item"> <img alt="Product name" src={data.ImageSrc} /> <div className="product-name">{data.Name}</div> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react'; import TextBox from 'devextreme-react/text-box'; const nameLabel = { 'aria-label': 'Name' }; export default function Field(data) { return ( <div className="custom-item"> <img alt="Product name" src={data && data.ImageSrc} /> <TextBox className="product-name" inputAttr={nameLabel} defaultValue={data && data.Name} readOnly={true} /> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('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/24.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

/* stylelint-disable indentation */ /* stylelint-disable selector-descendant-combinator-no-non-space */ .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; } .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; }

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