Pinecone

Select 

<div class="input-group">
    <label for="">Select</label>
    <select id="" name="">
        <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{% if inverse %} input-group--inverse{% endif %}{% if select.modifiers %}{% for modifier in select.modifiers %} input-group--{{ modifier }}{% endfor %}{% endif %}">
	<label for="{{ select.name }}">{{ label }}{% if select.error %} (Error){% elseif select.disabled %} (Disabled){% endif %}</label>
	<select id="{{ select.name }}" name="{{ select.name }}"{% if select.disabled %} disabled{% endif %}>
		{% for value, label in options %}
		<option val="{{ value }}">{{ label | safe }}</option>
		{% endfor %}
	</select>
	{% if select.error %}<p class="input-group__error">{% render '@svg', {svg: 'error'}, true %}{{ errorMessage | safe }}</p>{% endif %}
	<p class="input-group__description">{{ description }}</p>
</div>
 
{
  "label": "Select",
  "name": "select",
  "description": "Description for this select input.",
  "errorMessage": "Please make a selection.",
  "disabled": false,
  "options": {
    "1": "Option 1",
    "2": "Option 2",
    "3": "Option 3",
    "4": "Option 4",
    "5": "Option 5",
    "6": "Option 6",
    "7": "Option 7",
    "8": "Option 8",
    "9": "Option 9",
    "10": "Option 10"
  }
}

There are no notes for this item.