<h2 class="styleguide-title">Forms</h2>
<div class="preview-inner-container">
    <form class="">
        <fieldset>
            <legend>
                This is a fieldset title.
            </legend>
            <div class="fieldset-wrapper">
                <div class="form-item">
                    <div class="form-label">
                        <label for="textfield_id">Label textfield
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="textfield_name" id="textfield_id" />
                            <div class="description">Description textfield.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="tel_id">Label telephone field
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="tel" name="tel_name" id="tel_id" />
                            <div class="description">Description telephone field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="password_id">Label password
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="password" name="password_name" id="password_id" />
                            <div class="description">Description textfield.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="number_id">Label number
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="number_name" id="number_id" />
                            <div class="description">Description number.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="date_id">Label date
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="date_name" id="date_id" class="datepicker " placeholder="dd/mm/yyyy" />
                            <div class="description">Description date field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="datetime_id">Label datetime
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="datetime" name="datetime_name" id="datetime_id" />
                            <div class="description">Description datetime field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="url_id">Label website
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="url" name="url_name" id="url_id" />
                            <div class="description">Description website field.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="email_id">Label email
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="email" name="email_name" id="email_id" />

                            <div class="description">Description email.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="file_id">Label file
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <input type="file" name="file_name" id="file_id" />

                            <div class="description">Description file.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="textarea_id">Label textarea
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <textarea name="textarea_name" id="textarea_id">
</textarea>
                            <div class="description">Description textarea.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="">Label checkbox
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">

                            <input type="checkbox" id="checkbox-1" name="checkbox-1" class="checkbox " />
                            <label for="checkbox-1">Label checkbox 1
</label>

                            <input type="checkbox" id="checkbox-2" name="checkbox-2" class="checkbox " />
                            <label for="checkbox-2">Label checkbox 2
</label>

                            <div class="description">Description checkboxes.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="">Label radiobuttons
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">

                            <input type="radio" id="radio-1" name="radiogroup" class="radio " />
                            <label for="radio-1">Label radio 1
</label>

                            <input type="radio" id="radio-2" name="radiogroup" class="radio " />
                            <label for="radio-2">Label radio 2
</label>

                            <div class="description">Description radiobuttons.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="select_id">Label select
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <select name="select_name" id="select_id">
  
          <option>Option 1</option>
    
  
          <option>Option 2</option>
    
  
          <optgroup label="Option group">
                  <option>Option 3</option>
                  <option>Option 4</option>
              </optgroup>

    
  </select>
                            <div class="description">Description select.</div>

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-label">
                        <label for="multiselect_id">Label multiselect with chosen
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <select name="multiselect_name" id="multiselect_id" multiple="multiple">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
  </select>
                            <div class="description">Description multiselect with chosen.</div>

                        </div>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-label">
                        <label for="multiselect_id">Label multiselect with chosen
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                            <div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida
                                turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque
                                at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
                        </div>
                        <div class="form-item-column">
                            <select name="multiselect_name" id="multiselect_id" multiple="multiple" class="chosen-select ">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
  </select>
                            <div class="description">Description multiselect with chosen.</div>

                        </div>
                    </div>
                </div>

            </div>
        </fieldset>

        <fieldset class="inline-form-elements address-component">
            <legend>
                Personal information.
            </legend>
            <div class="fieldset-wrapper">
                <div class="form-item address-name">
                    <div class="form-label">
                        <label for="address-name">Name
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-name" id="address-name" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-firstname">
                    <div class="form-label">
                        <label for="address-firstname">Firstname
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-firstname" id="address-firstname" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-street">
                    <div class="form-label">
                        <label for="address-street">Street
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-street" id="address-street" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-number">
                    <div class="form-label">
                        <label for="address-number">Number
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="address-number" id="address-number" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-box-number">
                    <div class="form-label">
                        <label for="address-box-number">Box number
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="address-box-number" id="address-box-number" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-postal-code">
                    <div class="form-label">
                        <label for="address-postal-code">Postal code
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="number" name="address-postal-code" id="address-postal-code" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-city">
                    <div class="form-label">
                        <label for="address-city">City
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-city" id="address-city" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-country">
                    <div class="form-label">
                        <label for="address-country">Country
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <select name="address-country" id="address-country">
  
          <option>Country 1</option>
    
  
          <option>Country 2</option>
    
  </select>
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

                <div class="form-item address-nim">
                    <div class="form-label">
                        <label for="address-nim">National Insurance Number
  <span class="label-optional">
    (Optional)
  </span>
</label>
                    </div>
                    <div class="form-columns">
                        <div class="form-item-column">
                        </div>
                        <div class="form-item-column">
                            <input type="text" name="address-nim" id="address-nim" />
                            <div class="description"></div>

                        </div>
                    </div>
                </div>

            </div>
        </fieldset>

        <div class="form-actions">
            <input type="submit" value="Submit" class="btn " />
            <a href='' class="right delete" title="">Delete</a>
        </div>

    </form>
</div>
<h2 class="styleguide-title">Forms</h2>
<div class="preview-inner-container">
  <form class="{{ modifier }}">
    <fieldset>
    <legend>
      This is a fieldset title.
    </legend>
    <div class="fieldset-wrapper">
        {% include '@textfield' with {
          "label": "Label textfield",
          "for": "textfield_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description textfield.",

          "textfield_id": "textfield_id",
          "textfield_name": "textfield_name"
        }%}
        {% include '@telephone-field'
        with {
          "label": "Label telephone field",
          "for": "tel_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description telephone field.",

          "tel_id": "tel_id",
          "tel_name": "tel_name"
        }
        %}
        {% include '@password' with {
          "label": "Label password",
          "for": "password_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description textfield.",

          "password_id": "password_id",
          "password_name": "password_name"
        } %}
        {% include '@number'
        with {
          "label": "Label number",
          "for": "number_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description number.",

          "number_id": "number_id",
          "number_name": "number_name"
        }
        %}
        {% include '@date'
        with {
          "label": "Label date",
          "for": "date_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description date field.",

          "date_id": "date_id",
          "date_name": "date_name"
        }
        %}
        {% include '@datetime'
        with {
          "label": "Label datetime",
          "for": "datetime_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description datetime field.",

          "datetime_id": "datetime_id",
          "datetime_name": "datetime_name"
        }
        %}
        {% include '@website'
        with {
          "label": "Label website",
          "for": "url_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description website field.",

          "url_id": "url_id",
          "url_name": "url_name"
        }
        %}
        {% include '@email'
        with {
          "label": "Label email",
          "for": "email_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description email.",

          "email_id": "email_id",
          "email_name": "email_name"
        }
        %}
        {% include '@file'
        with {
          "label": "Label file",
          "for": "file_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description file.",

          "file_id": "file_id",
          "file_name": "file_name"
        }
        %}
        {% include '@textarea'
        with {
          "label": "Label textarea",
          "for": "textarea_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description textarea.",

          "textarea_id": "textarea_id",
          "textarea_name": "textarea_name"
        }
        %}
        {% include '@checkbox'
        with {
          "label": "Label checkbox",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description checkboxes.",

          "label_checkbox1": "Checkbox option 1",
          "checkbox1_name": "checkbox-1",
          "checkbox1_id": "checkbox-1",

          "checkbox1_label": "Label checkbox 1",
          "checkbox1_label_for": "checkbox-1",
          "checkbox1_label_optional": "",


          "label_checkbox2": "Checkbox option 2",
          "checkbox2_name": "checkbox-2",
          "checkbox2_id": "checkbox-2",

          "checkbox2_label": "Label checkbox 2",
          "checkbox2_label_for": "checkbox-2",
          "checkbox2_label_optional": ""
        }
        %}
        {% include '@radio'
        with {
          "label": "Label radiobuttons",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description radiobuttons.",

          "label_radio1": "Radio option 1",
          "radio1_name": "radiogroup",
          "radio1_id": "radio-1",

          "radio1_label": "Label radio 1",
          "radio1_label_for": "radio-1",
          "radio1_label_optional": "",


          "label_radio2": "Radio option 2",
          "radio2_name": "radiogroup",
          "radio2_id": "radio-2",

          "radio2_label": "Label radio 2",
          "radio2_label_for": "radio-2",
          "radio2_label_optional": ""
        }
        %}
        {% include '@select'
        with {
          "label": "Label select",
          "for": "select_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description select.",

          "select_id": "select_id",
          "select_name": "select_name",
          "options": [
            {
            "label": "Option 1"
            },
            {
            "label": "Option 2"
            },
            {
            "optgroup": true,
            "label": "Option group",
            "optgroupoptions": [
              {
              "label": "Option 3"
              },
              {
              "label": "Option 4"
              }
              ]
            }
          ]
        }
        %}
        {% include '@multiselect'
        with {
          "label": "Label multiselect with chosen",
          "for": "multiselect_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description multiselect with chosen.",

          "multiselect_id": "multiselect_id",
          "multiselect_name": "multiselect_name",
          "options": [
            {
            "label": "Option 1"
            },
            {
            "label": "Option 2"
            },
            {
            "label": "Option 3"
            },
            {
            "label": "Option 4"
            }
          ]
        }
        %}

        {% include '@multiselect-chosen'
        with {
          "label": "Label multiselect with chosen",
          "for": "multiselect_id",
          "label_optional": "Optional",

          "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.",
          "field_error": "",
          "description": "Description multiselect with chosen.",

          "multiselect_id": "multiselect_id",
          "multiselect_name": "multiselect_name",
          "options": [
            {
            "label": "Option 1"
            },
            {
            "label": "Option 2"
            },
            {
            "label": "Option 3"
            },
            {
            "label": "Option 4"
            }
          ]
        }
        %}

      </div>
    </fieldset>

    {% include '@address' %}

    {% include '@form-actions--editor' %}

  </form>
</div>
{
  "label_optional": "Optional"
}

Forms preview

This template provides you with an overview of all form elements as defined by the style guide.