Foehn Design System

Select 

<!-- Default -->
<div class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="testSelect">
        <option>Curabitur</option>
        <option>Maecenas vel</option>
        <option>Suspendisse maximus velit non lacus</option>
        <option>Sed maximus gohjyt</option>
        <option>Aliquam cupiditate, vel!</option>
        <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
    </select>
</div>


<!-- Multitple -->
<div class="form-group">
    <label for="exampleSelect1">Example multiple select</label>
    <select class="form-control" id="testSelect" multiple>
        <option>Curabitur</option>
        <option selected>Maecenas vel</option>
        <option>Suspendisse maximus velit non lacus</option>
        <option selected>Sed maximus</option>
        <option>Aliquam cupiditate, vel!</option>
        <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
    </select>
</div>


<div class="form-group">
  <label for="exampleSelect1">{{ label }}</label>
  <select class="{{ class }}" id="{{ id }}"{% if multiple %} multiple{% endif %}>
    {%- for option in options -%}
    <option{% if option.value %} value="{{ option.value }}"{% endif %}{% if option.selected %} selected{% endif %}{% if option.disabled %} disabled{% endif %}>{{ option.name }}</option>
    {% endfor -%}
  </select>
</div>
 
/* Default */
{
  "label": "Example select",
  "id": "testSelect",
  "name": "testInput",
  "class": "form-control",
  "options": [
    {
      "name": "Curabitur"
    },
    {
      "name": "Maecenas vel"
    },
    {
      "name": "Suspendisse maximus velit non lacus"
    },
    {
      "name": "Sed maximus gohjyt"
    },
    {
      "name": "Aliquam cupiditate, vel!"
    },
    {
      "name": "Nunc eget neque sit amet ipsum auctor laoreet"
    }
  ]
}


/* Multitple */
{
  "label": "Example multiple select",
  "id": "testSelect",
  "name": "testInput",
  "class": "form-control",
  "options": [
    {
      "name": "Curabitur"
    },
    {
      "name": "Maecenas vel",
      "selected": true
    },
    {
      "name": "Suspendisse maximus velit non lacus"
    },
    {
      "name": "Sed maximus",
      "selected": true
    },
    {
      "name": "Aliquam cupiditate, vel!"
    },
    {
      "name": "Nunc eget neque sit amet ipsum auctor laoreet"
    }
  ],
  "multiple": true
}

No notes defined.