Pinecone

Text Input: Default (Inverse) 

<div class="spacer"></div>
<div class="input-group input-group--inverse">
    <label for="input">Text Input</label>
    <input id="input" name="input" placeholder="Example input" type="text" value="" />
    <p class="input-group__description">Description for this text input.</p>
</div>
<div class="input-group input-group--inverse input-group--error">
    <label for="error">Text Input (Error)</label>
    <input id="error" name="error" placeholder="Example input" type="text" value="" />
    <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>
        Sorry, that appears to be incorrect.</p>
    <p class="input-group__description">Description for this text input.</p>
</div>
<div class="input-group input-group--inverse input-group--disabled">
    <label for="disabled">Text Input (Disabled)</label>
    <input id="disabled" name="disabled" placeholder="Example input" type="text" value="" disabled />
    <p class="input-group__description">Description for this text input.</p>
</div>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
{% for input in inputs %}
{% render '@input', {input:input, inverse:inverse}, true %}
{% endfor %}
 
{
  "standAlone": false,
  "inputs": [
    {
      "name": "input"
    },
    {
      "name": "error",
      "error": true,
      "modifiers": [
        "error"
      ]
    },
    {
      "name": "disabled",
      "disabled": true,
      "modifiers": [
        "disabled"
      ]
    }
  ],
  "inverse": true,
  "bodyClass": "has-dark-mint-500-background-color",
  "modifiers": [
    "inverse"
  ]
}

There are no notes for this item.