🍷 Digital Wine Cellar – Pattern Library

Form item input: Type Email Error 

<div class="form-item form-error">
    <label for="input-text-2">
        E-mail
        <em>Incorrect e-mail address</em>
    </label>
    <input type="email" id="input-text-2" value="email@domain">
</div>
 
{{#> @form-item}}
  {{> @input}}
{{/ @form-item}}
 
{
  "label": "E-mail",
  "id": "input-text-2",
  "type": "email",
  "help-msg": "Incorrect e-mail address",
  "modifier": "form-error",
  "value": "email@domain"
}

Form item input

form-item-input gives the <input> element and the accompanying <label> a container with the following properties:

  • full width of the <input> element within its container (useful for putting inside more complex layouts, like a grid)
  • support for status messages (changes the color of the input itself as well as any help message present)