Pinecone

Select 

<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">
	<label for="{{ select.name }}">{{ select.label }}{{ ' (Required)' if select.required }}</label>
	<select {% if select.error %}class="input--error"{% endif %} id="{{ select.name }}" name="{{ select.name }}"{{ ' multiple' if multiple }}{{ ' disabled' if select.disabled }}{{ ' required' if select.required }}>
		{% for value, label in select.options %}
		<option val="{{ value }}">{{ label | safe }}</option>
		{% endfor %}
	</select>
	{% if select.error %}<p class="input-group__error">{% render '@svg', {svg: 'error'}, true %}{{ select.errorMessage | safe }}</p>{% endif %}
	<p class="input-group__description">{{ select.description }}</p>
</div>
 
{
  "select": {
    "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"
    },
    "required": false
  }
}

There are no notes for this item.