Stilguiden VGR

Text Input 

<!-- Default -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="text">Label</label>

    <input class="vgr-form-field__input" id="text" type="text" placeholder="Enter text" name="type-text" value="">

</div>


<!-- Input Icon -->
<div class="vgr-form-field">

    <svg class="vgr-form-field__icon" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11h-.79l-.28-.27A6.471 6.471 0 0 0 13 6.5 6.5 6.5 0 1 0 6.5 13c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L17.49 16l-4.99-5zm-6 0C4.01 11 2 8.99 2 6.5S4.01 2 6.5 2 11 4.01 11 6.5 8.99 11 6.5 11z" fill-rule="evenodd"/></svg>
    <input class="vgr-form-field__input vgr-form-field__input--icon vgr-form-field__input--autocomplete" type="search" id="text" placeholder="">

</div>


<!-- Textarea -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="textarea">Label</label>

    <textarea class="vgr-form-field__input" id="textarea" type="textarea" placeholder="" name="type-textarea" value="" rows="5" cols="60"></textarea>

</div>


<!-- Password -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="password">Label</label>

    <input class="vgr-form-field__input" id="password" type="password" placeholder="Enter password" name="type-password" value="" required="required" aria-required="true">

</div>


<!-- Search -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="search">Label</label>

    <input class="vgr-form-field__input" id="search" type="search" placeholder="Enter key words" name="type-search" value="">

</div>


<!-- Email -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="email">Label</label>

    <input class="vgr-form-field__input" id="email" type="email" placeholder="Enter e-mail" name="type-email" value="">

</div>


<!-- Telephone -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="phone">Label</label>

    <input class="vgr-form-field__input" id="phone" type="tel" placeholder="" name="type-tel" value="">

</div>


<!-- Url -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="url">Label</label>

    <input class="vgr-form-field__input" id="url" type="url" placeholder="" name="type-url" value="">

</div>


<!-- Date Time -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="datetime">Label</label>

    <input class="vgr-form-field__input" id="datetime" type="datetime" placeholder="" name="type-datetime" value="">

</div>


<!-- Date -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="date">Label</label>

    <input class="vgr-form-field__input" id="date" type="date" placeholder="" name="type-date" value="">

</div>


<!-- Month -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="month">Label</label>

    <input class="vgr-form-field__input" id="month" type="month" placeholder="" name="type-month" value="">

</div>


<!-- Week -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="week">Label</label>

    <input class="vgr-form-field__input" id="week" type="week" placeholder="" name="type-week" value="">

</div>


<!-- Time -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="time">Label</label>

    <input class="vgr-form-field__input" id="time" type="time" placeholder="" name="type-time" value="">

</div>


<!-- Datetime Local -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="datetime-local">Label</label>

    <input class="vgr-form-field__input" id="datetime-local" type="datetime-local" placeholder="" name="type-datetime-local" value="">

</div>


<!-- Number -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="number">Label</label>

    <input class="vgr-form-field__input" id="number" type="number" placeholder="" name="type-number" value="">

</div>


<!-- Hidden -->
<div class="vgr-form-field">

    <input class="vgr-form-field__input" id="text" type="hidden" placeholder="" name="type-hidden" value="Hidden">

</div>


<!-- Checkbox -->
<div class="vgr-form-field">

    <fieldset>

        <legend>Title</legend>

        <p class="vgr-form__description">Select one or more options</p>

        <ul>

            <li>
                <input class="vgr-form-field__input" id="checkbox-1" type="checkbox" name="type-checkbox" value="Checkbox">
                <label class="vgr-form__label" for="checkbox-1">Label 1</label>
            </li>

            <li>
                <input class="vgr-form-field__input" id="checkbox-2" type="checkbox" name="type-checkbox" value="Checkbox">
                <label class="vgr-form__label" for="checkbox-2">Label 2</label>
            </li>

            <li>
                <input class="vgr-form-field__input" id="checkbox-3" type="checkbox" name="type-checkbox" value="Checkbox">
                <label class="vgr-form__label" for="checkbox-3">Label 3</label>
            </li>

        </ul>
    </fieldset>

</div>


<!-- Radio -->
<div class="vgr-form-field">

    <fieldset>

        <legend>Title</legend>

        <p class="vgr-form__description">Select one option</p>

        <ul>

            <li>
                <input class="vgr-form-field__input" id="radio-1" type="radio" name="type-radio" value="Radio">
                <label class="vgr-form__label" for="radio-1">Label 1</label>
            </li>

            <li>
                <input class="vgr-form-field__input" id="radio-2" type="radio" name="type-radio" value="Radio">
                <label class="vgr-form__label" for="radio-2">Label 2</label>
            </li>

            <li>
                <input class="vgr-form-field__input" id="radio-3" type="radio" name="type-radio" value="Radio">
                <label class="vgr-form__label" for="radio-3">Label 2</label>
            </li>

        </ul>
    </fieldset>

</div>


<!-- Range -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="range">Label</label>

    <input class="vgr-form-field__input" id="range" type="range" placeholder="" name="type-range" value="">

</div>


<!-- Color -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="color">Label</label>

    <input class="vgr-form-field__input" id="color" type="color" placeholder="" name="type-color" value="">

</div>


<!-- File -->
<div class="vgr-form-field">

    <label class="vgr-form__label" for="file">Label</label>

    <input class="vgr-form-field__input" id="file" type="file" placeholder="" name="type-file" value="File">

</div>


<!-- Submit -->
<div class="vgr-form-field">

    <input class="vgr-form-field__input" id="text" type="submit" placeholder="Enter text" name="type-submit" value="Submit">

</div>


<!-- Button -->
<div class="vgr-form-field">

    <input class="vgr-form-field__input" id="text" type="button" placeholder="Enter text" name="type-button" value="Button">

</div>


<!-- Reset -->
<div class="vgr-form-field">

    <input class="vgr-form-field__input" id="text" type="reset" placeholder="Enter text" name="type-reset" value="Reset">

</div>


<div class="vgr-form-field">
  {% if type != "checkboxes" and type != "radios" and input.type != "submit" %}
   {% if label %}
    <label class="vgr-form__label" for="{{ id }}">{{ label }}</label>
    {% endif %}
  {% endif %}

  {% if type == "textarea" %}
  <textarea class="vgr-form-field__input" id="{{ id }}" type="{{ type }}" placeholder="{{ placeholder }}" name="type-{{ type }}" value="{{ value }}" rows="5" cols="60"{% if required %} required="required" aria-required="true"{% endif %}></textarea>
  {% elseif type == "checkboxes" or type == "radios" %}
    <fieldset >
      {% if title %}
        <legend>{{ title }}</legend>
      {% endif %}
      {% if description %}
        <p class="vgr-form__description">{{ description }}</p>
      {% endif %}
      <ul>
      {% for item in options %}
        <li>
          <input class="vgr-form-field__input" id="{{ item.id }}" type="{{ item.type }}" name="type-{{ item.type }}" value="{{ item.value }}"{% if item.required %} required="required" aria-required="true"{% endif %}>
          <label class="vgr-form__label" for="{{ item.id }}">{{ item.label }}</label>
        </li>
      {% endfor %}
      </ul>
    </fieldset>
  {% elseif icon %}
  <svg class="vgr-form-field__icon" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11h-.79l-.28-.27A6.471 6.471 0 0 0 13 6.5 6.5 6.5 0 1 0 6.5 13c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L17.49 16l-4.99-5zm-6 0C4.01 11 2 8.99 2 6.5S4.01 2 6.5 2 11 4.01 11 6.5 8.99 11 6.5 11z" fill-rule="evenodd"/></svg>
  <input class="vgr-form-field__input vgr-form-field__input--icon vgr-form-field__input--autocomplete" type="search" id="{{ id }}" placeholder="{{ placeholder }}">
  {% else %}
  <input class="vgr-form-field__input" id="{{ id }}" type="{{ type }}" placeholder="{{ placeholder }}" name="type-{{ type }}" value="{{ value }}"{% if required %} required="required" aria-required="true"{% endif %}>
  {% endif %}
</div>
 
/* Default */
{
  "label": "Label",
  "id": "text",
  "type": "text",
  "placeholder": "Enter text"
}


/* Input Icon */
{
  "label": null,
  "id": "text",
  "type": "text",
  "placeholder": null,
  "required": null,
  "maxLength": null,
  "icon": true
}


/* Textarea */
{
  "label": "Label",
  "id": "textarea",
  "type": "textarea",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Password */
{
  "label": "Label",
  "id": "password",
  "type": "password",
  "placeholder": "Enter password",
  "required": "true",
  "maxLength": null
}


/* Search */
{
  "label": "Label",
  "id": "search",
  "type": "search",
  "placeholder": "Enter key words",
  "required": null,
  "maxLength": null
}


/* Email */
{
  "label": "Label",
  "id": "email",
  "type": "email",
  "placeholder": "Enter e-mail",
  "required": null,
  "maxLength": null
}


/* Telephone */
{
  "label": "Label",
  "id": "phone",
  "type": "tel",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Url */
{
  "label": "Label",
  "id": "url",
  "type": "url",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Date Time */
{
  "label": "Label",
  "id": "datetime",
  "type": "datetime",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Date */
{
  "label": "Label",
  "id": "date",
  "type": "date",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Month */
{
  "label": "Label",
  "id": "month",
  "type": "month",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Week */
{
  "label": "Label",
  "id": "week",
  "type": "week",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Time */
{
  "label": "Label",
  "id": "time",
  "type": "time",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Datetime Local */
{
  "label": "Label",
  "id": "datetime-local",
  "type": "datetime-local",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Number */
{
  "label": "Label",
  "id": "number",
  "type": "number",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Hidden */
{
  "label": null,
  "id": "text",
  "type": "hidden",
  "placeholder": null,
  "value": "Hidden",
  "required": null,
  "maxLength": null
}


/* Checkbox */
{
  "label": "Label",
  "id": "text",
  "type": "checkboxes",
  "placeholder": "Enter text",
  "title": "Title",
  "description": "Select one or more options",
  "options": [
    {
      "label": "Label 1",
      "id": "checkbox-1",
      "type": "checkbox",
      "value": "Checkbox"
    },
    {
      "label": "Label 2",
      "id": "checkbox-2",
      "type": "checkbox",
      "value": "Checkbox"
    },
    {
      "label": "Label 3",
      "id": "checkbox-3",
      "type": "checkbox",
      "value": "Checkbox"
    }
  ]
}


/* Radio */
{
  "label": "Label",
  "id": "text",
  "type": "radios",
  "placeholder": "Enter text",
  "title": "Title",
  "description": "Select one option",
  "options": [
    {
      "label": "Label 1",
      "id": "radio-1",
      "type": "radio",
      "value": "Radio"
    },
    {
      "label": "Label 2",
      "id": "radio-2",
      "type": "radio",
      "value": "Radio"
    },
    {
      "label": "Label 2",
      "id": "radio-3",
      "type": "radio",
      "value": "Radio"
    }
  ]
}


/* Range */
{
  "label": "Label",
  "id": "range",
  "type": "range",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* Color */
{
  "label": "Label",
  "id": "color",
  "type": "color",
  "placeholder": null,
  "required": null,
  "maxLength": null
}


/* File */
{
  "label": "Label",
  "id": "file",
  "type": "file",
  "placeholder": null,
  "value": "File",
  "required": null,
  "maxLength": null
}


/* Submit */
{
  "label": null,
  "id": "text",
  "type": "submit",
  "placeholder": "Enter text",
  "value": "Submit"
}


/* Button */
{
  "label": null,
  "id": "text",
  "type": "button",
  "placeholder": "Enter text",
  "value": "Button"
}


/* Reset */
{
  "label": null,
  "id": "text",
  "type": "reset",
  "placeholder": "Enter text",
  "value": "Reset"
}

There are no notes for this item.