<!-- Default -->
<div class="form-item form-type- form-item-">

    <label for="edit-name">
  Label
</label>

    <input type="text" id="edit-name" name="name" class="form-text" />

</div>

<!-- Text -->
<div class="form-item form-type-text form-item-first-name">

    <label for="edit-first-name">
  First Name
</label>

    <input type="text" id="edit-first-name" name="first-name" class="form-text" />

    <div class="description">
        <div id="edit-first-name--description" class="webform-element-description">Write here your first name</div>
    </div>
</div>

<!-- Select -->
<div class="form-item form-type-select form-item-country">

    <label for="edit-country">
  Country
</label>

    <select id="edit-country" name="country" class="form-select">
      <option value="norway" >Norge</option>
      <option value="sweden" >Sverige</option>
      <option value="finland" >Suomi</option>
  </select>

</div>

<!-- Textarea -->
<div class="form-item form-type-textarea form-item-message">

    <label for="edit-message">
  Your message
</label>

    <div class="form-textarea-wrapper">
        <textarea id="edit-message" name="message" class="form-textarea resize-vertical"></textarea>
    </div>

</div>

<!-- Checkbox -->
<div class="form-item form-type-checkbox form-item-subscribe">

    <input type="checkbox" id="edit-subscribe" name="subscribe" class="form-checkbox" />

    <label for="edit-subscribe">
  Subscribe to Newsletter
</label>

</div>

<!-- Radio -->
<div class="form-item form-type-radio form-item-pizza">

    <input type="radio" id="edit-pizza" name="pizza" class="form-radio" />

    <label for="edit-pizza">
  I want pizza!
</label>

</div>

{% set input %}
<div class="form-item form-type-{{ type }} form-item-{{ name }}">
  {% if type != 'checkbox' and type != 'radio' and type != 'hr' %}
    {% include '@webform-label' %}
  {% endif %}

  {% if type == 'hr' %}
    {% include '@webform-hr' %}
  {% elseif type == 'select' %}
    {% include '@webform-select' %}
  {% elseif type == 'textarea' %}
    {% include '@webform-textarea' %}
  {% else %}
    {% include '@webform-input' %}
  {% endif %}

  {% if type == 'checkbox' or type == 'radio' %}
    {% include '@webform-label' %}
  {% endif %}

  {% if description %}
    <div class="description">
      <div id="edit-{{ name }}--description" class="webform-element-description">{{ description }}</div>
    </div>
  {% endif %}
</div>
{% endset %}


{% if field.type == 'flexbox' %}
  {% include '@webform-flexbox' %}
{% elseif field.type == 'fieldset' %}
  {% include '@webform-fieldset' %}
{% elseif field.type == 'checkboxes' %}
  {% include '@webform-checkboxes' %}
{% elseif field.type == 'radios' %}
  {% include '@webform-radios' %}
{% else %}
  {{ input }}
{% endif %}
/* Default: No context defined */

/* Text */
{
  "type": "text",
  "name": "first-name",
  "label": "First Name",
  "description": "Write here your first name"
}

/* Select */
{
  "type": "select",
  "name": "country",
  "label": "Country"
}

/* Textarea */
{
  "type": "textarea",
  "name": "message",
  "label": "Your message"
}

/* Checkbox */
{
  "type": "checkbox",
  "name": "subscribe",
  "label": "Subscribe to Newsletter"
}

/* Radio */
{
  "type": "radio",
  "name": "pizza",
  "label": "I want pizza!"
}

There are no notes for this item.