Organism

Form

Show code
            
              <form class="form form--form-reg">
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">First name</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="text" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Last name</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="text" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Company</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="text" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Username</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="text" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Email address</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="email" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Password</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="password" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Repeat password</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="password" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
</form>

            
          
Show code
            
              <form class="form form--form-request">
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Saluation</label>
      <div class="form-group-wrapper">
        <div class="form-radio">
          <input class="form-radio__input" type="radio" value="" id="radio1" name="radioGroup"> <label class="form-radio__container" for="radio1"><span class="form-radio__checkmark"><!----></span>Radio one</label>
        </div>
        <div class="form-radio">
          <input class="form-radio__input" type="radio" value="" id="radio2" name="radioGroup"> <label class="form-radio__container" for="radio2"><span class="form-radio__checkmark"><!----></span>Radio two</label>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">First name</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="text" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Last name</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="text" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Email adress</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="email" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Country</label>
      <div class="form-group-wrapper">
        <div class="form-select">
          <select class="form-select-default-js">
            <option>
              Form select default option
            </option>
            <option>
              Form select option 1
            </option>
            <option>
              Form select option 2
            </option>
            <option>
              Form select option 3
            </option>
            <option>
              Form select option 4
            </option>
            <option>
              Form select option 5
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Company name</label>
      <div class="form-group-wrapper">
        <input class="form-text form-control" type="text" name="form-name" placeholder="Form text placeholder">
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label">Your message</label>
      <div class="form-group-wrapper">
        <textarea class="form-textarea form-control"></textarea>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <div class="form-group-wrapper">
        <div class="form-checkbox">
          <label class="form-checkbox__container"><input class="form-checkbox__input" type="checkbox"> <span class="form-checkbox__checkmark"><!----></span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ae commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</label>
        </div>
      </div>
    </div>
  </div>
</form>