<h2 class="styleguide-title">Forms</h2>
<div class="preview-inner-container">
    <form class="">
        <fieldset>
            <legend>
                This is a fieldset title.
            </legend>

            <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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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
  <span class="label-optional">
    (Optional)
  </span>
</label>

                        <input type="checkbox" id="checkbox-2" name="checkbox-2" class="checkbox " />
                        <label for="checkbox-2">Label checkbox 2
  <span class="label-optional">
    (Optional)
  </span>
</label>

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

                        <div class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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
  <span class="label-optional">
    (Optional)
  </span>
</label>

                        <input type="radio" id="radio-2" name="radiogroup" class="radio " />
                        <label for="radio-2">Label radio 2
  <span class="label-optional">
    (Optional)
  </span>
</label>

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

                        <div class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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 class="field-error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.</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" class="error" />
                            <div class="description"></div>

                            <div class="field-error">Please fill in a correct name</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" class="error" />
                            <div class="description"></div>

                            <div class="field-error">Please fill in a correct firstname</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" class="error" />
                            <div class="description"></div>

                            <div class="field-error">Please fill in a valid street name</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" class="error" />
                            <div class="description"></div>

                            <div class="field-error">Please fill in a valid number</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" class="error" />
                            <div class="description"></div>

                            <div class="field-error">Please fill in a valid postal code</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" class="error" />
                            <div class="description"></div>

                            <div class="field-error">Please fill in a valid city</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 class="field-error">Please select a valid country</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>

    {% 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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "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": "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "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": "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.",
      "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"
          }
        ]
    }
    %}

    </fieldset>

    {% include '@address--address-with-errors' %}

    {% 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.