Lunds universitet - Style Guide

Select: Multiple 

<div class=" mb-3">
    <label for="select" class="form-label">Select Label</label>
    <select class="form-select" id="select" aria-describedby="formMultipleSelectHelp" multiple>
        <option selected>First</option>
        <option>Second</option>
        <option selected>Third</option>
        <option selected>Fourth</option>
        <option>Fifth</option>
        <option>Sixth</option>
    </select>
    <div id="formMultipleSelectHelp" class="form-text">Note that you can select multiple items.</div>

</div>
 
<div {{#if modifiers}}class="{{modifiers modifiers}}"{{/if}}>
  {{#if label}}
  <label for="{{id}}" class="form-label{{modifiers label-modifiers}}">{{label}}</label>
  {{/if}}
  <select class="form-select" {{#if label}}id="{{id}}"{{/if}}{{#if help}} aria-describedby="{{help.id}}"{{/if}}{{#if multiple}} multiple{{/if}}>
    {{#each options}}
      <option{{#if value}} value="{{value}}"{{/if}}{{#if selected}} selected{{/if}}>{{label}}</option>
    {{/each}}
  </select>
  {{#if help}}
    {{render "@form-help" help}}
  {{/if}}
</div>
 
{
  "label": "Select Label",
  "name": "select",
  "id": "select",
  "modifiers": [
    "mb-3"
  ],
  "options": [
    {
      "label": "First",
      "selected": true
    },
    {
      "label": "Second"
    },
    {
      "label": "Third",
      "selected": true
    },
    {
      "label": "Fourth",
      "selected": true
    },
    {
      "label": "Fifth"
    },
    {
      "label": "Sixth"
    }
  ],
  "multiple": true,
  "help": {
    "id": "formMultipleSelectHelp",
    "text": "Note that you can select multiple items."
  }
}

No notes defined.