Pinecone

Input: Unwrapped (Inverse) 

<label for="input">Text</label>
<input id="input" name="input" placeholder="Example input" type="text" value="" />
<span class="helptext">Description for this text input.</span>
<label for="password">Password</label>
<input id="password" name="password" placeholder="Enter your password" type="password" value="" />
<label for="email">Email Address</label>
<input id="email" name="email" placeholder="me@example.com" type="email" value="" />
<label for="url">Web Address</label>
<input id="url" name="url" placeholder="https://example.com" type="url" value="" />
<label for="tel">Phone Number</label>
<input id="tel" name="tel" placeholder="1 (555) 123-4567" type="tel" value="" />
<label for="number">Number</label>
<input id="number" name="number" placeholder="42" type="number" value="" />
<label for="error">Text (Error)</label>
<input class="input--error" id="error" name="error" placeholder="Example input" type="text" value="Incorrect input" />
<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><span class="helptext">Description for this text input.</span>
<label for="disabled">Text (Disabled)</label>
<input id="disabled" name="disabled" placeholder="Example input" type="text" value="" disabled />
<span class="helptext">Description for this text input.</span>
 
{% for input in inputs %}
	{% render '@' + component, input, true %}
{% endfor %}
 
{
  "component": "input--unwrapped",
  "inputs": [
    {
      "name": "input"
    },
    {
      "name": "password",
      "type": "password",
      "label": "Password",
      "placeholder": "Enter your password",
      "description": false
    },
    {
      "name": "email",
      "type": "email",
      "label": "Email Address",
      "placeholder": "me@example.com",
      "description": false
    },
    {
      "name": "url",
      "type": "url",
      "label": "Web Address",
      "placeholder": "https://example.com",
      "description": false
    },
    {
      "name": "tel",
      "type": "tel",
      "label": "Phone Number",
      "placeholder": "1 (555) 123-4567",
      "description": false
    },
    {
      "name": "number",
      "type": "number",
      "label": "Number",
      "placeholder": "42",
      "description": false
    },
    {
      "name": "error",
      "type": "text",
      "error": true
    },
    {
      "name": "disabled",
      "disabled": true
    }
  ],
  "inverse": true,
  "bodyClass": "has-dark-mint-500-background-color"
}

There are no notes for this item.