🍷 Digital Wine Cellar – Pattern Library

Form item input: Type Email 

<div class="form-item ">
    <label for="type-email-1">
        Input type email
        <em>(Required)</em>
    </label>
    <input type="email" id="type-email-1" value="">
</div>
 
{{#> @form-item}}
  {{> @input}}
{{/ @form-item}}
 
{
  "label": "Input type email",
  "id": "type-email-1",
  "help-msg": "(Required)",
  "type": "email"
}

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)