Pinecone

Selects: Default 

<div class="spacer"></div>
<div class="input-group">
    <label for="select">Select</label>
    <select id="select" name="select">
        <option val="1">Option 1</option>
        <option val="2">Option 2</option>
        <option val="3">Option 3</option>
        <option val="4">Option 4</option>
        <option val="5">Option 5</option>
        <option val="6">Option 6</option>
        <option val="7">Option 7</option>
        <option val="8">Option 8</option>
        <option val="9">Option 9</option>
        <option val="10">Option 10</option>
    </select>
    <p class="input-group__description">Description for this select input.</p>
</div>
<div class="input-group input-group--error">
    <label for="error">Select (Error)</label>
    <select id="error" name="error">
        <option val="1">Option 1</option>
        <option val="2">Option 2</option>
        <option val="3">Option 3</option>
        <option val="4">Option 4</option>
        <option val="5">Option 5</option>
        <option val="6">Option 6</option>
        <option val="7">Option 7</option>
        <option val="8">Option 8</option>
        <option val="9">Option 9</option>
        <option val="10">Option 10</option>
    </select>
    <p class="input-group__error"><svg class="icon icon--error" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/error.svg#error" />
        </svg>
        Please make a selection.</p>
    <p class="input-group__description">Description for this select input.</p>
</div>
<div class="input-group input-group--disabled">
    <label for="disabled">Select (Disabled)</label>
    <select id="disabled" name="disabled" disabled>
        <option val="1">Option 1</option>
        <option val="2">Option 2</option>
        <option val="3">Option 3</option>
        <option val="4">Option 4</option>
        <option val="5">Option 5</option>
        <option val="6">Option 6</option>
        <option val="7">Option 7</option>
        <option val="8">Option 8</option>
        <option val="9">Option 9</option>
        <option val="10">Option 10</option>
    </select>
    <p class="input-group__description">Description for this select input.</p>
</div>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
{% for select in selects %}
{% render '@select', {select:select, inverse:inverse}, true %}
{% endfor %}
 
{
  "standAlone": false,
  "selects": [
    {
      "name": "select"
    },
    {
      "name": "error",
      "error": true,
      "modifiers": [
        "error"
      ]
    },
    {
      "name": "disabled",
      "disabled": true,
      "modifiers": [
        "disabled"
      ]
    }
  ]
}

There are no notes for this item.