Select componentAvailable since EcoComposer 2.2

Classical select example, needs JS (for now) to update the main shown value :

Classical multiple select example :

The defaults values are :

'label-padding' : .5rem * theming.$font-size 1rem * theming.$font-size,
'label-first' : false,
'print' : false,
'select--font-family' : theming.$font-family,
'select--font-size' : 1.6rem * theming.$font-size,
'select--list--background-color' : 'select--list--background-color',
'select--list--background-image' : 'select--list--background-image',
'select--list--border' : 'select--list--border',
'select--list--border-radius' : .5rem * theming.$font-size,
'select--list--box-shadow' : 'select--list--box-shadow',
'select--value--background-color' : null,
'select--value--background-image' : 'select--value--background-image',
'select--value--border' : 'select--value--border',
'select--value--border-radius' : .5rem * theming.$font-size,
'select--value--box-shadow' : 'select--value--box-shadow',
'select--value--color' : 'select--value--color',
'select--value--label--color' : 'select--value--label--color',
'select--item--color' : 'select--item--color',
'select--item--hover--background-color' : null,
'select--item--hover--background-image' : 'select--item--hover--background-image',
'select--item--hover--color' : 'select--item--hover--color',
'suffix' : '',
'themes' :  (
  'light' : (
    'default--select--list--background-color' : #eee,
    'default--select--list--background-image' : none,
    'default--select--list--border' : none,
    'default--select--list--box-shadow' : .1rem * theming.$font-size .2rem * theming.$font-size .4rem * theming.$font-size #aaa,
    'default--select--value--background-color' : none,
    'default--select--value--background-image' : linear-gradient(45deg, #e5e5e5 30%, #eee),
    'default--select--value--border' : none,
    'default--select--value--box-shadow' : .1rem * theming.$font-size .2rem * theming.$font-size .2rem * theming.$font-size #666,
    'default--select--value--color' : #333, // Option selected ▼︎ (The arrow)
    'default--select--value--label--color' : #111, // Option selected ▼︎ (The text)
    'default--select--item--color' : inherit,
    'default--select--item--hover--background-color' : none,
    'default--select--item--hover--background-image' : linear-gradient(45deg, #faa, #aaf),
    'default--select--item--hover--color' : #111
  ),
  'dark' : (
    'default--select--list--background-color' : #333,
    'default--select--list--background-image' : none,
    'default--select--list--border' : none,
    'default--select--list--box-shadow' : .1rem * theming.$font-size .2rem * theming.$font-size .4rem * theming.$font-size #aaa,
    'default--select--value--background-color' : none,
    'default--select--value--background-image' : linear-gradient(45deg, #ccc 30%, #eee),
    'default--select--value--border' : none,
    'default--select--value--box-shadow' : .1rem * theming.$font-size .2rem * theming.$font-size .2rem * theming.$font-size #666,
    'default--select--value--color' : #333, // Option selected ▼︎ (The arrow)
    'default--select--value--label--color' : #111, // Option selected ▼︎ (The text)
    'default--select--item--color' : inherit,
    'default--select--item--hover--background-color' : none,
    'default--select--item--hover--background-image' : linear-gradient(45deg, #900, #994c00 70%),
    'default--select--item--hover--color' : #111
  )
)

We can implement it that way : 

@include select.init();
@include select.create(
  (
    'label-first' : true,
    'suffix' : '-2'
  )
);

We can implement it that way :

Simple select

<div class="select select-container"> <button type=button role=select class="select select-value"> <span class="select select-value--label">Selected option</span> <span>&#x25bc;&#xfe0e;</span> </button> <div class="select select-list"> <input type=radio role=menuitem id=chk-first-option name=select-radio class="select select-item--activator" value="first value" checked=checked/> <label for=chk-first-option class="select select-item--label">Selected option</label> <input type=radio role=menuitem id=chk-second-option name=select-radio class="select select-item--activator" value="second value"/> <label for=chk-second-option class="select select-item--label">Second option</label> </div> </div>

Classical multiple select example

(
-2
is a suffix) <div class="select select-container"> <button type=button role=select class="select-2 select-value" aria-labelledby=select-value--label> <span id=select-value--label class="select-2 select-value--label">Selected option</span> <span>&#x25bc;&#xfe0e;</span> </button> <div class="select select-list"> <label for=radio-first-option class="select-2 select-item--label">Selected option</label> <input type=checkbox role=menuitem id=radio-first-option class="select-2 select-item--activator" value="first value" checked=checked /> <label for=radio-first-option class="select-2 select-item--label">Selected option</label> <input type=checkbox role=menuitem id=radio-second-option class="select-2 select-item--activator" value="second value" /> </div> </div>
^