🍷 Digital Wine Cellar – Pattern Library

Select: Select Multiple 

<label for="select-2">Select multiple</label>
<select id="select-2" name="select-2" multiple class="">
    <option value="option-0">Option 1</option>
    <option value="option-1" selected>Option 2</option>
    <option value="option-2" selected>Option 3</option>
    <option value="option-3">Option 4</option>
    <option value="option-4">Option 5</option>
    <option value="option-5">Option 6</option>
</select>
 
<label
  for="{{id}}"
  {{#if at-label}} class="at-only"{{/if}}
>{{label}}</label>
<select
  id="{{id}}"
  name="{{id}}"
  {{#if multiple}}multiple{{/if}}
  class="{{modifier}}"
>
  {{#each options}}
    <option value="option-{{@index}}"{{#if selected}} selected{{/if}}>{{option}}</option>
  {{/each}}
</select>
 
{
  "label": "Select multiple",
  "id": "select-2",
  "options": [
    {
      "option": "Option 1"
    },
    {
      "option": "Option 2",
      "selected": true
    },
    {
      "option": "Option 3",
      "selected": true
    },
    {
      "option": "Option 4"
    },
    {
      "option": "Option 5"
    },
    {
      "option": "Option 6"
    }
  ],
  "multiple": true
}

Select

The HTML <select> element represents a control that provides a menu of options.