HiVolda Styleguide

Form 

<!-- Default -->
<input type="text" value="" placeholder="Placeholder" id="">


<!-- Search -->
<input type="search" value="" placeholder="Søk her..." id="">


<!-- Email -->
<input type="email" value="" placeholder="Din epost" id="">


<!-- Password -->
<input type="password" value="" placeholder="Passord" id="">


<!-- Textarea -->
<textarea id="edit-textarea" name="textarea" class="form-textarea" rows="20" cols="60">
</textarea>


<!-- Select -->
<select id="edit-select" name="" class="form-select">

    <option value="" selected">- None -</option>

    <option value="one">One</option>

    <option value="two">Two</option>

    <option value="three">Three</option>

</select>


<!-- Select multiple -->
<select id="edit-select-multiple" name="" class="form-select" multiple>

    <option value="one">One</option>

    <option value="two">Two</option>

    <option value="three">Three</option>

</select>


<!-- Checkbox -->
<input type="checkbox" value="" placeholder="Placeholder" id="checkbox">

<label for="checkbox">Checkbox</label>


<!-- Radio -->
<input type="radio" value="" placeholder="Placeholder" id="radio">

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


<!-- Default -->
<input type="{{ type }}" value="{{ value }}" placeholder="{{ placeholder }}" id="{{ id }}" {{ attr }}>
{% if label %}
<label for="{{ id }}">{{ label }}</label>
{% endif %}

<!-- Search -->
<input type="{{ type }}" value="{{ value }}" placeholder="{{ placeholder }}" id="{{ id }}" {{ attr }}>
{% if label %}
<label for="{{ id }}">{{ label }}</label>
{% endif %}

<!-- Email -->
<input type="{{ type }}" value="{{ value }}" placeholder="{{ placeholder }}" id="{{ id }}" {{ attr }}>
{% if label %}
<label for="{{ id }}">{{ label }}</label>
{% endif %}

<!-- Password -->
<input type="{{ type }}" value="{{ value }}" placeholder="{{ placeholder }}" id="{{ id }}" {{ attr }}>
{% if label %}
<label for="{{ id }}">{{ label }}</label>
{% endif %}

<!-- Textarea -->
<textarea id="{{ id }}" name="{{ name }}" class="{{ class }}" {{ 'rows="' + rows + '"' if rows }} {{ 'cols="' + cols + '"' if cols }}>
</textarea>

<!-- Select -->
<select id="{{ id }}" name="{{ name }}" class="{{ class }}" {{ 'multiple' if multiple}}>
  {%  for option in options %}
  <option value="{{ option.value }}" {{ 'selected"' if option.selected }}>{{option.text}}</option>
  {% endfor %}
</select>

<!-- Select multiple -->
<select id="{{ id }}" name="{{ name }}" class="{{ class }}" {{ 'multiple' if multiple}}>
  {%  for option in options %}
  <option value="{{ option.value }}" {{ 'selected"' if option.selected }}>{{option.text}}</option>
  {% endfor %}
</select>

<!-- Checkbox -->
<input type="{{ type }}" value="{{ value }}" placeholder="{{ placeholder }}" id="{{ id }}" {{ attr }}>
{% if label %}
<label for="{{ id }}">{{ label }}</label>
{% endif %}

<!-- Radio -->
<input type="{{ type }}" value="{{ value }}" placeholder="{{ placeholder }}" id="{{ id }}" {{ attr }}>
{% if label %}
<label for="{{ id }}">{{ label }}</label>
{% endif %}
 
/* Default */
{
  "type": "text",
  "placeholder": "Placeholder"
}


/* Search */
{
  "type": "search",
  "placeholder": "Søk her..."
}


/* Email */
{
  "type": "email",
  "placeholder": "Din epost"
}


/* Password */
{
  "type": "password",
  "placeholder": "Passord"
}


/* Textarea */
{
  "type": "text",
  "placeholder": "Placeholder",
  "cols": 60,
  "rows": 20,
  "id": "edit-textarea",
  "name": "textarea",
  "class": "form-textarea"
}


/* Select */
{
  "type": "text",
  "placeholder": "Placeholder",
  "id": "edit-select",
  "class": "form-select",
  "options": [
    {
      "text": "- None -",
      "selected": true
    },
    {
      "value": "one",
      "text": "One"
    },
    {
      "value": "two",
      "text": "Two"
    },
    {
      "value": "three",
      "text": "Three"
    }
  ]
}


/* Select multiple */
{
  "type": "text",
  "placeholder": "Placeholder",
  "id": "edit-select-multiple",
  "multiple": true,
  "class": "form-select",
  "options": [
    {
      "value": "one",
      "text": "One"
    },
    {
      "value": "two",
      "text": "Two"
    },
    {
      "value": "three",
      "text": "Three"
    }
  ]
}


/* Checkbox */
{
  "type": "checkbox",
  "placeholder": "Placeholder",
  "id": "checkbox",
  "label": "Checkbox"
}


/* Radio */
{
  "type": "radio",
  "placeholder": "Placeholder",
  "id": "radio",
  "label": "Radio"
}

No notes defined.