Skip to main content
🏠FormForm FieldVersion: 2.0.0-beta.6

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:

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>