HiVolda Styleguide

Form 

<!-- Default -->
<label for="">Tekst label</label>

<input type="text" value="" placeholder="Placeholder" id="">


<!-- Email -->
<label for="input-email">E-post label</label>

<input type="text" value="" placeholder="Placeholder" id="">


<!-- Checkbox -->
<legend>Checkboxes</legend>

<input type="checkbox" value="" placeholder="Placeholder" id="check-1">

<label for="check-1">Checkbox 1</label>

<input type="checkbox" value="" placeholder="Placeholder" id="check-2">

<label for="check-2">Checkbox 2</label>


<!-- Radiobutton -->
<legend>Radiobuttons</legend>

<input type="radio" value="1" placeholder="" id="radio-1" name="radio-choice">

<label for="radio-1">Radio 1</label>

<input type="radio" value="2" placeholder="" id="radio-2" name="radio-choice">

<label for="radio-2">Radio 2</label>


{% if label %}
<label for="{{ input.id }}">{{ label }}</label>
{% endif %}
{% if legend %}
<legend>{{ legend }}</legend>
{% endif %}
{% for item in inputs %}
{% render "@element-form", item.input, true %}
{% endfor %}
 
/* Default */
{
  "label": "Tekst label",
  "inputs": [
    {
      "input": null,
      "id": "input-text"
    }
  ]
}


/* Email */
{
  "label": "E-post label",
  "inputs": [
    {
      "input": null,
      "id": "input-text"
    }
  ],
  "input": {
    "id": "input-email",
    "type": "email"
  }
}


/* Checkbox */
{
  "label": false,
  "inputs": [
    {
      "input": {
        "label": "Checkbox 1",
        "type": "checkbox",
        "id": "check-1"
      }
    },
    {
      "input": {
        "label": "Checkbox 2",
        "type": "checkbox",
        "id": "check-2"
      }
    }
  ],
  "legend": "Checkboxes"
}


/* Radiobutton */
{
  "label": false,
  "inputs": [
    {
      "input": {
        "label": "Radio 1",
        "type": "radio",
        "attr": "name=\"radio-choice\"",
        "placeholder": null,
        "id": "radio-1",
        "value": 1
      }
    },
    {
      "input": {
        "label": "Radio 2",
        "type": "radio",
        "attr": "name=\"radio-choice\"",
        "placeholder": null,
        "id": "radio-2",
        "value": 2
      }
    }
  ],
  "legend": "Radiobuttons"
}

No notes defined.