Form Field

Form Field is a single field in a form. The following elements are designed to work inside a form field with class qtm-form-field:

• Form label
• input:
  • Checkbox
  • Dropdown select
  • Multiselect
  • Radio
  • Text area
  • Text input
  • Toggle switch
• Form caption

Label

This is a help text

Label

This is a help text

Label

Error message

Label

Warning message

<!-- Default Text input -->
<div class="qtm-form-field">
  <label class="qtm-form-label" for="example2">Label</label>
  <div class="qtm-text-input">
    <i class="material-icons qtm-icon">account_circle</i>
    <input type="text" placeholder="Text input default" id="example2" />
  </div>
  <p class="qtm-form-caption">This is a help text</p>
</div>
<!-- Text input in disabled state, size small -->
<div class="qtm-form-field">
  <label class="qtm-form-label qtm-required qtm-disabled" for="example1"
    >Label</label
  >
  <div class="qtm-text-input qtm-small qtm-disabled">
    <i class="material-icons qtm-icon">account_circle</i>
    <input
      type="text"
      placeholder="Text input small disabled"
      id="example1"
      disabled
    />
  </div>
  <p class="qtm-form-caption qtm-disabled">This is a help text</p>
</div>
<!-- Text input in error state, size medium -->
<div class="qtm-form-field">
  <label class="qtm-form-label qtm-medium" for="example3">Label</label>
  <div class="qtm-text-input qtm-medium qtm-error">
    <i class="material-icons qtm-icon">account_circle</i>
    <input type="text" placeholder="Text input medium" id="example3" />
  </div>
  <p class="qtm-form-caption qtm-medium qtm-error">Error message</p>
</div>
<!-- Text input in warning state, size large -->
<div class="qtm-form-field">
  <label class="qtm-form-label qtm-large" for="example4">Label</label>
  <div class="qtm-text-input qtm-large qtm-warning">
    <i class="material-icons qtm-icon">account_circle</i>
    <input type="text" placeholder="Text input large" id="example4" />
  </div>
  <p class="qtm-form-caption qtm-large qtm-warning">Warning message</p>
</div>