Select 

<label class="kx-label" for="selectbox1">Small select</label>
<div class="select-box select-box--small">
    <select id="selectbox1" class="kx-option">
        <option> Option 1</option>
        <option> Option 2</option>
        <option> Option 3</option>
        </select>
    <div class="select__arrow"></div>
</div>
<label class="kx-label" for="selectbox1">Default select</label>
<div class="select-box select-box--base">
    <select id="selectbox1" class="kx-option">
        <option> Option 1</option>
        <option> Option 2</option>
        <option> Option 3</option>
        </select>
    <div class="select__arrow"></div>
</div>
<label class="kx-label" for="selectbox1">Large select</label>
<div class="select-box select-box--large">
    <select id="selectbox1" class="kx-option">
        <option> Option 1</option>
        <option> Option 2</option>
        <option> Option 3</option>
        </select>
    <div class="select__arrow"></div>
</div>
<label class="kx-label" for="selectbox1">Disabled select</label>
<div class="select-box select-box--base">
    <select id="selectbox1" class="kx-option" disabled>
        <option> Option 1</option>
        <option> Option 2</option>
        <option> Option 3</option>
        </select>
    <div class="select__arrow"></div>
</div>
 
{% for row in rows -%}
<label class="kx-label" for="selectbox1">{{ row.label }}</label>
<div class="select-box select-box--{{ row.size }}">
    <select id="selectbox1" class="kx-option"{% if row.disabled -%} disabled{% endif %}>
        {% for option in row.options -%}
        <option> {{ option.txt }}</option>
        {% endfor -%}
    </select>
    <div class="select__arrow"></div>
</div>
{% endfor -%}
 
{
  "rows": [
    {
      "label": "Small select",
      "selected": "foo",
      "size": "small",
      "options": [
        {
          "txt": "Option 1",
          "value": 1
        },
        {
          "txt": "Option 2",
          "value": 2
        },
        {
          "txt": "Option 3",
          "value": 3,
          "selected": true
        }
      ]
    },
    {
      "label": "Default select",
      "selected": "foo",
      "size": "base",
      "options": [
        {
          "txt": "Option 1",
          "value": 1
        },
        {
          "txt": "Option 2",
          "value": 2
        },
        {
          "txt": "Option 3",
          "value": 3
        }
      ]
    },
    {
      "label": "Large select",
      "selected": "foo",
      "size": "large",
      "options": [
        {
          "txt": "Option 1",
          "value": 1
        },
        {
          "txt": "Option 2",
          "value": 2
        },
        {
          "txt": "Option 3",
          "value": 3
        }
      ]
    },
    {
      "label": "Disabled select",
      "selected": "foo",
      "size": "base",
      "disabled": true,
      "options": [
        {
          "txt": "Option 1",
          "value": 1
        },
        {
          "txt": "Option 2",
          "value": 2
        },
        {
          "txt": "Option 3",
          "value": 3
        }
      ]
    }
  ]
}

There are no notes for this item.