Pinecone

Selects: Unwrapped (Inverse) 

<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>
<span class="helptext">Description for this select input.</span>
<label for="error">Select</label>
<select class="input--error" 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><span class="helptext">Description for this select input.</span>
<label for="disabled">Select</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>
<span class="helptext">Description for this select input.</span>
 
{% for select in selects %}
	{% if component %}
		{% render '@' + component, {select: select, multiple: multiple}, true %}
	{% else %}
		{% render '@select', {select: select, multiple: multiple}, true %}
	{% endif %}
{% endfor %}
 
{
  "standAlone": false,
  "selects": [
    {
      "name": "select"
    },
    {
      "name": "error",
      "error": true
    },
    {
      "name": "disabled",
      "disabled": true
    }
  ],
  "component": "select--unwrapped",
  "bodyClass": "has-dark-mint-500-background-color",
  "inverse": true
}

There are no notes for this item.