🍷 Digital Wine Cellar – Pattern Library

Form item input 

<!-- Default -->
<div class="form-item ">
    <label for="type-text-1">
        Input type text

    </label>
    <input type="text" id="type-text-1" value="">
</div>


<!-- 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>


<!-- 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>


<!-- Type Password -->
<div class="form-item ">
    <label for="type-password-1">
        Input type password

    </label>
    <input type="password" id="type-password-1" value="">
</div>


<!-- Type Number -->
<div class="form-item ">
    <label for="type-number-1">
        Input type number

    </label>
    <input type="number" id="type-number-1" value="">
</div>


<!-- Type Tel -->
<div class="form-item ">
    <label for="type-tel-1">
        Input type tel

    </label>
    <input type="tel" id="type-tel-1" value="">
</div>


<!-- Type Time -->
<div class="form-item ">
    <label for="type-time-1">
        Input type time

    </label>
    <input type="time" id="type-time-1" value="">
</div>


<!-- Type Url -->
<div class="form-item ">
    <label for="type-url-1">
        Input type url

    </label>
    <input type="url" id="type-url-1" value="">
</div>


{{#> @form-item}}
  {{> @input}}
{{/ @form-item}}
 
/* Default */
{
  "label": "Input type text",
  "id": "type-text-1"
}


/* Type Email */
{
  "label": "Input type email",
  "id": "type-email-1",
  "help-msg": "(Required)",
  "type": "email"
}


/* Type Email Error */
{
  "label": "E-mail",
  "id": "input-text-2",
  "type": "email",
  "help-msg": "Incorrect e-mail address",
  "modifier": "form-error",
  "value": "email@domain"
}


/* Type Password */
{
  "label": "Input type password",
  "id": "type-password-1",
  "type": "password"
}


/* Type Number */
{
  "label": "Input type number",
  "id": "type-number-1",
  "type": "number"
}


/* Type Tel */
{
  "label": "Input type tel",
  "id": "type-tel-1",
  "type": "tel"
}


/* Type Time */
{
  "label": "Input type time",
  "id": "type-time-1",
  "type": "time"
}


/* Type Url */
{
  "label": "Input type url",
  "id": "type-url-1",
  "type": "url"
}

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)