---
layout: doc
title: deliteful/Select
---
# deliteful/Select
`deliteful/Select` is a form-aware and store-aware widget leveraging the native
[HTML5 select element](http://www.w3.org/TR/html5/forms.html#the-select-element).
*Example of deliteful/Select (single choice mode):*
*Example of deliteful/Select (multiple choice mode):*
##### Table of Contents
[Element Instantiation ](#instantiation)
[Using Select](#using)
[Element Styling](#styling)
[Enterprise Use](#enterprise)
## Element Instantiation
For details on the instantiation lifecycle, see [`delite/Widget`](/delite/docs/master/Widget.md).
### Declarative Instantiation
```js
require(["deliteful/Select", "requirejs-domready/domReady!"],
function () {
});
```
```html
{"text": "Option 1", "value": "1"},
...
```
### Programmatic Instantiation
```js
require(["dstore/Memory", "dstore/Trackable",
"deliteful/Select", "requirejs-domready/domReady!"],
function (Memory, Trackable) {
var select = new Select({selectionMode: "multiple"});
// Create the store
var source = new (Memory.createSubclass(Trackable))({});
select.source = source;
// add options to the Select widget
source.add({text: "Option 1", value: "1"});
...
select.placeAt(document.body);
});
```
Or with an array in source property :
```js
require(["decor/ObservableArray", "decor/Observable",
"deliteful/Select", "requirejs-domready/domReady!"],
function (ObservableArray, Observable) {
// Create the store
var source = new ObservableArray();
select.source = source;
// add options to the Select widget
source.push(new Observable({text: "Option 1", value: "1"}));
...
select.placeAt(document.body);
});
```
## Using Select
### Selection Mode
The widget provides several selection modes through the `selectionMode` property
inherited from `delite/Selection`.
For details, see [`Using delite/Selection`](/delite/docs/master/Selection.md#using).
Note that `deliteful/Select` only supports for this property the values `single` and
`multiple`.
### Attribute Mapping
`deliteful/Select` uses the following attributes of source items:
* The `text` attribute for the label of the option elements.
* The `value` attribute for their value attribute.
* The `disabled` attribute for the disabled state of the option (an option is enabled
if the attribute is absent, or its value is falsy, or it is the string "false").
Because the widget inherits from [`delite/StoreMap`](/delite/docs/master/StoreMap.md),
the mapping between the attributes of the source items and the attributes used by
`deliteful/Select` can be redefined using the `labelAttr`, `valueAttr`, and `disabledAttr`
properties, or using `labelFunc`, `valueFunc`, and `disabledFunc` properties. See the
[`delite/StoreMap`](/delite/docs/master/StoreMap.md) documentation for more
information about the available mapping options.
## Element Styling
### Supported themes
This widget provides default styling for the following delite theme:
* bootstrap
### CSS Classes
CSS classes are bound to the structure of the widget declared in its template `deliteful/Select/Select.html`.
The following table lists the CSS classes that can be used to style the Select widget.
|class name/selector|applies to|
|----------|----------|
|d-select|Select widget node
|d-select-inner|The inner native HTML `