---
title: Form Elements
layout: common-ux-layout.hbs
---

<form>
  <div class="sg-section">
    <div class="sg-grid responsive">
      {{#each input-basic-elements}}
      <div class="sg-item">
        {{#if type}}
        <h4>type="{{type}}"</h4>
        {{else}}
        {{#if header}}
        <h4>{{header}}</h4>
        {{/if}}
        {{/if}}
        <div class="module-library-block form-item" data-code="html">{{>input-label-element json}}</div>
      </div>
      {{/each}}
    </div>
  </div>
  <div class="sg-section">
    <label>Validation</label>
    <div class="sg-grid responsive">
      <div class="sg-item">
        <div class="module-library-block" data-code="html">{{>validation}}</div>
      </div>
    </div>
  </div>
  <div class="sg-section">
    <label>Question</label>
    <div class="sg-grid responsive">
      <div class="sg-item">
        <div class="module-library-block form-item" data-code="html">{{>question-example}}</div>
      </div>
    </div>
  </div>
  <div class="sg-section">
    <label>Textarea</label>
    <div class="sg-grid responsive">
      <div class="sg-item">
        <div class="module-library-block" data-code="html">{{>textarea-example}}</div>
      </div>
    </div>
  </div>
  <div class="sg-section">
    <label>Select</label>
    <div class="sg-grid responsive">
      <div class="sg-item">
        <div class="module-library-block" data-code="html">{{>input-select-example}}</div>
      </div>
    </div>
  </div>
  <div class="sg-section">
    <label>Checkbox</label>
    <div class="sg-grid responsive">
      <div class="sg-item">
        <div class="module-library-block" data-code="html">
          {{#each input-checkboxes}}
          {{>input-checkbox}}
          {{/each}}
        </div>
      </div>
    </div>
  </div>
  <div class="sg-section">
    <label>Checkbox (switch)</label>
    <div class="sg-grid responsive">
      <div class="sg-item">
        <div class="module-library-block" data-code="html">
          {{#each input-checkbox-switches}}
          {{>input_checkbox_switch}}
          {{/each}}
        </div>
      </div>
    </div>
  </div>
  <div class="sg-section">
    <label>Radio button</label>
    <div class="sg-grid responsive">
      <div class="sg-item">
        <div class="module-library-block" data-code="html">{{>input-radios}}</div>
      </div>
    </div>
  </div>
  <div class="sg-section">
    <div class="form-item">
      <label for="uploadDemo">Upload with file drop</label>
      <div class="dropbox">
        <input type="file" id="uploadDemo" name="uploadDemo" class="input-file" />
        <p>Drag your files here or click to browse</p>
      </div>
    </div>
  </div>
</form>