Pinecone

Input: Default (Inverse) 

<div class="input-group">
    <label for="input">Text</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">
    <label for="password">Password</label>
    <input id="password" name="password" placeholder="Enter your password" type="password" value="" />
</div>
<div class="input-group">
    <label for="email">Email Address</label>
    <input id="email" name="email" placeholder="me@example.com" type="email" value="" />
</div>
<div class="input-group">
    <label for="url">Web Address</label>
    <input id="url" name="url" placeholder="https://example.com" type="url" value="" />
</div>
<div class="input-group">
    <label for="tel">Phone Number</label>
    <input id="tel" name="tel" placeholder="1 (555) 123-4567" type="tel" value="" />
</div>
<div class="input-group">
    <label for="number">Number</label>
    <input id="number" name="number" placeholder="42" type="number" value="" />
</div>
<div class="input-group">
    <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>
    <p class="input-group__description">Description for this text input.</p>
</div>
<div class="input-group">
    <label for="disabled">Text (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>
 
{% for input in inputs %}
	{% render '@' + component, input, true %}
{% endfor %}
 
{
  "component": "input",
  "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.